React对不同的输入使用一个事件处理程序

Question

在React应用程序中处理onChange处理简单联系表单时，如何与DRY编码保持一致？

我想传递一个应该更新的状态的参数

例如，简单地有4个输入[名称，电话，电子邮件，文本]需要4个不同的事件处理程序来更新组件的不同状态，这不是很好。

  constructor(props) {
    super(props);
    this.state = {
      type: '',
      message: '',
      name: '',
      email: '',
      phone: '',
      content: ''
    };
  }
  handleChange(e, state) {
    this.setState({state: e.target.value});
    alert(state + " with val " + e.target.value)
  }

这不起作用，并且无法读取未定义错误的属性“值”

<input value={this.state.name} onChange={this.handleChange(name).bind(this)} id="firstName" name="firstName" autocomplete="off" type="text" required />

Answer 1

您需要将参数传递给handleChange，如此

onChange={ this.handleChange.bind(this, name) }

和handleChange的签名将为handleChange(state, e) {}

或者您可以使用arrow function

onChange={ (e) => this.handleChange(e, name) }

<强>更新

根据您的问题描述，我认为您不需要传递额外的参数，您可以输入name（在这种情况下我认为输入名称和州名称可以相同< / em>），可以这样做

＆＃13;

＆＃13;

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      // type: '',
      // message: '',
      name: '',
      email: '',
      // phone: '',
      // content: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }
  
  render() {
    return <div>
      <input 
        value={this.state.name} 
        onChange={ this.handleChange } 
        name="name" 
        autocomplete="off" 
        type="text" 
        required 
      />
          
      <input 
        value={this.state.email} 
        onChange={ this.handleChange } 
        name="email" 
        autocomplete="off" 
        type="text" 
        required 
      />
          
      <p>{this.state.name},{this.state.email}</p>
    </div>
  }
};

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;