是否有更 DRY 的方法来创建 React 文本输入表单元素？

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 次而不是一次（仅用于声明）并强制创建一个 onChange 逻辑，该逻辑可以轻松地（错误地）更改应用程序用户 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 文本输入表单元素？

Is there a more DRY approach for creating React text input form elements?

javascript

architecture

dry

reactjs

react-native