为什么我使用钩子的简单 React 表单不起作用？

Question

I'm learning the basics of React Hooks at the moment, I am wondering why this particular code does not work:

function Form() {
  const [input, setInput] = useState('');
  let result = '';
  function handleSubmit(e) {
    e.preventDefault();
    result = input;
  }
  return (
    <React.Fragment>
      <h1>Form practice</h1>
      <form>
        <input type="text" onChange={(e) => setInput(e.target.value)}></input>
        <button type="submit" onClick={handleSubmit}>
          submit
        </button>
      </form>
      <h2>{result}</h2>
    </React.Fragment>
  );
}

I am simply expecting <h2>{result}</h2> to display what is being captured in input while the submit button is clicked. However, nothing happens. What is wrong with this logic?

Answer 1

The way that a react component knows to rerender is that you set state. Changing the value of a local variable will not cause a rerender. So if you want the <input> to change separately from the <h2> , you will need to turn result into a piece of state.

const [input, setInput] = useState('');
const [result, setResult] = useState('');
function handleSubmit(e) {
  e.preventDefault();
  setResult(input);
}
return (
  <React.Fragment>
    <h1>Form practice</h1>
    <form>
      <input type="text" onChange={(e) => setInput(e.target.value)}></input>
      <button type="submit" onClick={handleSubmit}>
        submit
      </button>
    </form>
    <h2>{result}</h2>
  </React.Fragment>
);

Answer 2

Simply because on each render of the component (whenever the state change, the component will render again) the code runs again and result will set to value 0.

Why not just render the input instead of the result variable?

 function Form() { const [input, setInput] = useState(''); function handleSubmit(e) { // do whatever you need to do to submit the form. } return ( <React.Fragment> <h1>Form practice</h1> <form> <input type="text" onChange={(e) => setInput(e.target.value)}></input> <button type="submit" onClick={handleSubmit}> submit </button> </form> <h2>{input}</h2> </React.Fragment> ); }

Answer 3

Hi ye need to set the result with useState as well so that re-render happens

function Form() {
  const [input, setInput] = useState('');
  const [result,setResult]= useState('');
  const handleSubmit(e) {
    e.preventDefault();
    setResult(input);
  }
  return (
    <React.Fragment>
      <h1>Form practice</h1>
      <form>
        <input type="text" onChange={(e) => setInput(e.target.value)}></input>
        <button type="submit" onClick={handleSubmit}>
          submit
        </button>
      </form>
      <h2>{result}</h2>
    </React.Fragment>
  );
}

now u will be able to see the changes