如何使用React ES6处理多个受控输入？

Question

这是我的小提琴

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

Answer 1

您尚未将属性传递给handeChange函数。 像this.handleChange.bind(this, 'e')传递它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

Answer 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> 

另外，还有所谓的双向绑定助手 。 据我了解，它们仍然在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')} />