还有更多的DRY方法来创建React文本输入表单元素吗? [英] Is there a more DRY approach for creating React text input form elements?

问题描述

在React和React Native中，接受包含<input>表单字段的做法是包括一个onChange处理程序，该处理程序在每次击键时都更新state.例如:

In React and React Native the accepted practice to include <input> form fields is to include an onChange handler that updates the state on every keystroke. e.g. :

<input type="text" value={this.state.valueField1} onChange={this.handleChangeField1} />

状态被更新，以防止在用户键入时将值恢复为原始值.

The state is updated in order to prevent the value from being restored to the original value while the user is typing.

这会导致很多重复的代码，从而违反了旧的DRY(请勿重复自我)原则.例如(基于反应文档):

This leads to a lot of repeated code, thus violating the old DRY (Do not repeat your self) principle. e.g. (based in the React Docs):

  handleChangeField1(event) {
    this.setState({valueField1: event.target.value});
  }

  handleChangeField2(event) {
    this.setState({valueField2: event.target.value});
  }

这里的问题是必须将字段名称"Field1"重复3次而不是重复3次(仅用于声明)，并强制创建一个onChange逻辑，该逻辑可以轻松地(并错误地)更改标准的预期行为APP用户的UI组件.

The problem here is having to repeat the field name "Field1" 3 times instead of one (just for the declaration) and forcing the creation of an onChange logic that can easily (and by mistake), alter the standardized expected behavior of the UI components for the APP users.

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

The question: Is there a less verbose, less repeating and less risky way to include <input> fields in ReactJS/React-Native apps?

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

When I talk about preserving the component´s native behavior, I´m mainly thinking about not changing the value while the user is typing.

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

As a reference, in simple HTML/VanillaJS example we would just add the <input value="{ServerSideValue}" name="field1"> once and then get the value from field1 wherever we need it, thus preserving the native component behavior and without repeating the field1 more than once in the declaration.

推荐答案

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

This is a pattern that we use a lot. I'm pretty sure it answers your question:

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>
    );
  }
}

我为你做了一个例子:

至于您对本机行为的关注，您无需担心用onChange更改value的情况. onChange是事件回调，以便我们可以对该事件做出反应.

As for your concern with the native behavior, you don't need to worry about changing the value with an onChange. onChange is an event callback so that we can react to that event.

与受控与不受控制输入有关，他们建议对其进行控制.这就是为什么我将value提供回输入的原因.

There is concern with controlled vs uncontrolled inputs, and they recommend controlling them. That's why I'm supplying the value back to the inputs.

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

Let me know how that goes or if you've got any questions.

这篇关于还有更多的DRY方法来创建React文本输入表单元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！