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