如何使用react es6处理多个控制输入

How to handle multiple controlled inputs with react es6?

本文关键字：控制 输入 处理 何使用 react es6      更新时间：2023-09-26

这是我的小提琴

https://codepen.io/seunlanlege/pen/XjvgPJ?编辑= 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')
);

您没有将属性传递给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

这样做的一种方法是给每个输入一个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')} />
相关文章：