是否有更干的方法来创建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>
    );
  }
}

我为你做了一个例子:

Edit Form State example

编辑:至于你对原生行为的关注,你不必担心用value改变onChangeonChange是一个事件回调,以便我们可以对该事件作出反应。

有关controlled vs uncontrolled投入的担忧,他们建议控制它们。这就是我将value提供给输入的原因。

让我知道这是怎么回事,或者如果你有任何问题。

以上是关于是否有更干的方法来创建React文本输入表单元素?的主要内容,如果未能解决你的问题,请参考以下文章

react 表单处理

React 表单处理

React-表单处理

将输入字段聚焦在React组件中 - 尝试创建ref时出现类型错误

React5.表单处理-受控组件

React5.表单处理-受控组件