如何使用 React es6 处理多个受控输入？答案

【问题标题】：How to handle multiple controlled inputs with react es6?如何使用 React es6 处理多个受控输入？
【发布时间】：2016-11-01 10:15:35
【问题描述】：

这是我的小提琴

https://codepen.io/seunlanlege/pen/XjvgPJ?editors=0011

我有两个输入，我正在尝试使用一种方法来处理任何输入字段的 onChange 事件。

我在互联网上四处寻找解决方案，但一无所获。

我正在使用 es6，请问我该怎么做？

class Form extends React.Component {
  `constructor(props) {
    super(props);
    this.state = {text:{
      e:'hi',
      c:''
    }};
    this.handleSubmit = this.handleSubmit.bind(this);
  }`

  `handleChange(event,property) {
    const text = this.state.text;
      text[property] = event.target.value;
      this.setState({text});
  }`

  `handleSubmit(event) {
    alert('Text field value is: ' + this.state.text.e);
  }`

  `render() {
    return (
      <div>
        <div>{this.state.text.e}</div>
        <input type="text"
          placeholder="Hello!"
          value={this.state.text.e}
          onChange={this.handleChange.bind(this)} />
        <input type="text"
          placeholder="Hello!"
          value={this.state.text.c}
          onChange={this.handleChange.bind(this)} />
        <button onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}`

ReactDOM.render(
  `<Form />`,
  document.getElementById('root')
);

【问题讨论】：

请使用 sn-p 工具将您的代码放入问题中。链接很快就会过时......
我不能，我不断收到格式错误。
Y̶o̶u̶̶c̶a̶n̶̶u̶s̶e̶̶t̶h̶e̶̶t̶i̶d̶y̶̶b̶u̶t̶t̶o̶n̶.̶ - 您是否应该返回 HTML 而不将其放入字符串中？这对我来说听起来不对
它不工作，你能看看笔，告诉我我的代码有什么问题吗？

标签： javascript reactjs ecmascript-6

【解决方案1】：

您尚未将属性传递给 handeChange 函数。像this.handleChange.bind(this, 'e') 一样传递它，并且接收道具的顺序是错误的，属性将是第一个参数，然后是事件而不是相反。

代码：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text:{
      e:'hi',
      c:''
    }};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(property, event) {
    console.log(event.target.value);
    const text = {...this.state.text};
      text[property] = event.target.value;
      this.setState({ text }); //or you can use the shorthand here. ES6 is awesome <3
  }

  handleSubmit(event) {
    alert('Text field value is: ' + this.state.text.e);
  }

  render() {
    return (
      <div>
        <div>{this.state.text.e}</div>
        <div>{this.state.text.c}</div>
        <input type="text"
          placeholder="Hello!"
          value={this.state.text.e}
          onChange={this.handleChange.bind(this, 'e')} />
        <input type="text"
          placeholder="Hello!"
          value={this.state.text.c}
          onChange={this.handleChange.bind(this, 'c')} />
        <button onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('root')
);

CodePen

【讨论】：

非常感谢，您让我免于为我拥有的每个输入字段编写更改函数

【解决方案2】：

执行此操作的一种方法是为您的每个输入提供name 属性并根据该属性设置状态：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: {
      e: 'hi',
      c: ''
    } };
    this.onChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    var oldState = this.state.text;
    var newState = { [e.target.name]: e.target.value };
    
    // I have to assign/join because you've put the text state in a parent object.
    this.setState({ text: Object.assign(oldState, newState) });
  }

  handleSubmit(event) {
    alert('Text field value is: ' + this.state.text.e);
  }

  render() {
    console.log(this.state);
    return (
      <div>
        <div>{this.state.text.e}</div>
        <input type="text"
          placeholder="Hello!"
          name="e"
          value={this.state.text.e}
          onChange={this.onChange} />
        <input type="text"
          placeholder="Hello!"
          name="c"
          value={this.state.text.c}
          onChange={this.onChange} />
        <button onClick={this.handleSubmit}>
          Submit
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById('View')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<div id="View"></div>

还有所谓的two-way binding helpers。据我了解，它们仍然在 React 的文档中显示 mixins，因此您可能最好使用像 react-link-state 这样的第三方库：

this.state = {
  username: '',
  password: '',
  toggle: false
};

<input type="text" valueLink={linkState(this, 'username')} />
<input type="password" valueLink={linkState(this, 'password')} />
<input type="checkbox" checkedLink={linkState(this, 'toggle')} />

【讨论】：