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(在这种情况下我认为输入名称和状态名称可以相同),并且可以这样做

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

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