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

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

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

现在您将能够看到更改