时间戳

首页 > 解决方案 > 为什么我使用钩子的简单 React 表单不起作用？

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

问题描述

我现在正在学习 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然而，什么也没有发生。这个逻辑有什么问题？

标签： javascriptreactjsformsreact-hooks

解决方案

反应组件知道重新渲染的方式是您设置状态。更改局部变量的值不会导致重新渲染。因此，如果您希望 与<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>
);

推荐阅读