设置状态不起作用 on更改内部使用状态

Question

>我正在使用useState Hook来存储一个表单，以便在用户单击时管理视图。界面显示良好，但我无法在输入字段中输入值。谁能告诉我为什么？谢谢。

const [url, seturl] = useState({url: ''});
const changeUrl = (field) => (event) => {
seturl({
...url,
[field]: event.target.value,
});
};
const [step, setStep] = useState(
<form>
<input type="text" value={url.url} onChange={changeUrl('url')}/>
</form>
);
return (
<div>{step}</div>
);

Answer 1

如果你在onChange上向函数传递一些东西，你需要像这样调用它：

onChange={e => seturl({ url: e.target.value })}

或者你可以简单地通过执行以下操作来实现这一点：

const [url, setUrl] = useState('');
return (
<div>
<form>
<input type="text" value={url} onChange={e => setUrl(e.target.value)}/>
</form>
</div>
);

从上面的例子中得到的启示是使用钩子来方便自己并摆脱对对象的管理。如果您有更多字段(如url和page(，则可以创建多个状态，例如：

const [url, setUrl] = useState('');
const [page, setPage] = useState('');

希望这对您有所帮助。

Answer 2

你需要调用changeURL函数 onChange，而不是每次都调用。

使用您的代码，changeUrl('url'( 会在每次渲染时触发。 为了避免这种情况，您需要将其作为函数调用，输入字段的事件：onChange={e => changeUrl(e)}

Answer 3

const [url, seturl] = useState("url");
const changeUrl = event => {
seturl( event.target.value);
};
return (
<div>
<form>
<input type="text" value={url} onChange={(e)=>changeUrl(e)} />
<p>URL: {url}</p>
</form>
</div>
);