将保存的输入响应到状态
将保存的输入响应到状态
提问于 2022-01-27 19:23:50
我有一个表单，我需要从所有输入中获取信息并将其保存在状态中。
我做错了什么？
const [name,setName] = useState("");
return (
<div className="App">
<div class="inputfield">
<label>Campaign Name</label>
<input type='text' required maxLength='20' onChange={setName()} className="input"/>
</div>
</div>
)回答 4
Stack Overflow用户
发布于 2022-01-27 19:40:18
下面是我如何为输入值设置状态的示例。
确保在组件外部(在定义组件之前)设置它。
let initialValues = {
city: ''
}const [quote, setQuote] = useState(initialValues)<input type="text"
value={ quote.city || "" }
name="city"
onChange={ onChange } />const onChange = (e) => {
setQuote({...quote, [e.target.name]: e.target.value});
};您可以在initialValues const中拥有同样多的键值。请确保定义输入的名称以及指向状态对象的值以及处理该设置的onChange事件。编码愉快！
Stack Overflow用户
发布于 2022-01-27 19:43:34
要使用所拥有的代码进行简单更改，只需为输入元素重写onChange方法即可。
onChange={(e) => setName(e.target.value)}Stack Overflow用户
发布于 2022-01-27 19:49:04
根据您提供的代码，您似乎没有将状态设置为任何关于更改的内容。一个好的做法是建立一个处理程序，这个处理程序将在输入的值被更改时触发--这将将相应的值设置为您的状态。
此外，由于您实际上是将其作为受控输入，因此我建议添加状态值作为其值属性。这样，您就可以通过状态直接处理它(例如，如果您想让它重置)。
const YourComponent = () => {
const [name,setName] = useState("");
const nameChangeHandler = (e) => {
setName(e.target.value)
};
return (
<div className="App">
<div class="inputfield">
<label>Campaign Name</label>
<input type='text' required maxLength='20' onChange={nameChangeHandler} value={name} className="input"/>
</div>
</div>
};有关更多信息，您还可以检查正式文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70884553
复制相关文章
相似问题
腾讯云开发者
