Question

我现在正在学习React Hooks的基础知识，我想知道为什么这个特定的代码不起作用：

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>
  );
}

我只是希望<h2>{result}</h2>显示单击“提交”按钮时input中正在捕获的内容。但是，什么也没有发生。这种逻辑有什么问题？

Answer 1

react组件知道要重新呈现的方式是您设置状态。更改局部变量的值不会导致重新渲染。因此，如果您希望<input>与<h2>分开更改，则需要将result变成一种状态。

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

仅仅因为在每次渲染组件时（无论状态何时改变，组件都会再次渲染），代码都会再次运行，并且result将设置为值0。

为什么不仅仅渲染input而不是result变量？

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

嗨，您还需要使用useState设置结果，以便进行重新渲染

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>
  );
}

现在您将能够看到更改

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

3 个答案: