在 React 和 React Native 中,公认的做法包括<input>
表单字段包括一个onChange
更新的处理程序state
每次击键时。例如:
<input type="text" value={this.state.valueField1} onChange={this.handleChangeField1} />
更新状态是为了防止在用户键入时将值恢复为原始值。
这会导致大量重复代码,从而违反了旧的 DRY(不要重复自己)原则。例如(基于反应文档 https://reactjs.org/docs/forms.html):
handleChangeField1(event) {
this.setState({valueField1: event.target.value});
}
handleChangeField2(event) {
this.setState({valueField2: event.target.value});
}
这里的问题是必须重复字段名称“Field1”3 次而不是一次(仅用于声明),并强制创建一个 onChange 逻辑,该逻辑可以轻松(并且错误地)改变 UI 组件的标准化预期行为对于APP用户。
问题:有没有一种更简洁、更少重复、风险更小的方法来包含<input>
ReactJS/React-Native 应用程序中的字段?
当我谈论保留组件的本机行为时,我主要考虑的是在用户键入时不要更改值。
作为参考,在简单的 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
是一个事件回调,以便我们可以对该事件做出反应。
有人担心受控与不受控 https://reactjs.org/docs/uncontrolled-components.html输入,他们建议控制它们。这就是为什么我要提供value
回到输入。
请告诉我进展如何或者您是否有任何疑问。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)