是否有更干的方法来创建React文本输入表单元素?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了是否有更干的方法来创建React文本输入表单元素?相关的知识,希望对你有一定的参考价值。
在React和React Native中,包含<input>
表单字段的公认实践是包含一个onChange
处理程序,它在每次击键时更新state
。例如:
<input type="text" value={this.state.valueField1} onChange={this.handleChangeField1} />
更新状态是为了防止在用户键入时将值恢复为原始值。
这导致了很多重复的代码,从而违反了旧的DRY(不要重复你的自我)原则。例如(总部设在React Docs):
handleChangeField1(event) {
this.setState({valueField1: event.target.value});
}
handleChangeField2(event) {
this.setState({valueField2: event.target.value});
}
这里的问题是必须重复字段名称“Field1”3次而不是一次(仅用于声明)并强制创建一个onChange逻辑,它可以轻松(并且错误地)改变UI组件的标准化预期行为对于APP用户。
问题:在ReactJS / React-Native应用程序中包含<input>
字段是否有更简洁,重复性更低且风险更低的方法?
当我谈到保留组件的本机行为时,我主要考虑的是在用户输入时不更改值。
作为参考,在简单的html / VanillaJS示例中,我们只需添加<input value="{ServerSideValue}" name="field1">
一次,然后从我们需要的地方获取field1的值,从而保留本机组件行为,并且不会在声明中多次重复field1。
这是我们经常使用的模式。我很确定它会回答你的问题:
class MyForm extends React.Component {
state = {
firstName: '',
lastName: ''
};
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
render() {
return (
<div>
<input
name="firstName"
onChange={this.handleChange}
placeholder="Enter your first name"
value={this.state.firstName}
/>
<input
name="lastName"
onChange={this.handleChange}
placeholder="Enter your last name"
value={this.state.lastName}
/>
</div>
);
}
}
我为你做了一个例子:
编辑:至于你对原生行为的关注,你不必担心用value
改变onChange
。 onChange
是一个事件回调,以便我们可以对该事件作出反应。
有关controlled vs uncontrolled投入的担忧,他们建议控制它们。这就是我将value
提供给输入的原因。
让我知道这是怎么回事,或者如果你有任何问题。
以上是关于是否有更干的方法来创建React文本输入表单元素?的主要内容,如果未能解决你的问题,请参考以下文章