Question

在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次而不是重复3次（仅用于声明），并强制创建一个onChange逻辑，该逻辑可以轻松地（并错误地）更改标准的预期行为APP用户的UI组件。

问题：在ReactJS / React-Native应用程序中包含<input>字段的冗长，重复性和风险更低吗？

当我谈论保留组件的本机行为时，我主要是在考虑在用户键入时不更改值。

作为参考，在简单的HTML / VanillaJS示例中，我们只需添加一次<input value="{ServerSideValue}" name="field1">，然后在需要的地方从field1中获取值，从而保留了本机组件的行为，并且无需重复多次field1在声明中。

Answer 1

这是我们经常使用的模式。我很确定它可以回答您的问题：

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提供回输入。

如果您有任何疑问，请告诉我。

还有更多的DRY方法来创建React文本输入表单元素吗？

1 个答案: