Question

我正在使用React中的表单。我在MatchForm组件中嵌套状态，并从具有不同输入的状态“绑定”值。我想有onChange函数来管理所有cinput更改并将其传递给state。当我只有阵容输入时，当前onChange函数有效。但是当我添加其他输入时，我不知道如何处理它。我应该如何命名输入以及onChange函数应该如何处理所有输入（没有很多ifs）？

提前谢谢

class MatchForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lineup: {
        setter: '',
        receiver1: '',
        receiver2: '',
        attacker: '',
        blocker1: '',
        blocker2: '',
        libero: ''
      },
      distribution: {
        receiver1: 20,
        receiver2: 20,
        attacker: 20,
        blocker1: 20,
        blocker2: 20
      },
      risk: 'normal',
      default: false
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({lineup: { ...this.state.lineup, [e.target.name]:e.target.value } })
    }

  render() {
    return (
      <div>
        {
          Object.keys(this.state.lineup).map((el,i) =>
            <select
              key={i}
              name={el}
              onChange={this.onChange}
              value={this.state.lineup[el]}
            >
              <option value="" disabled>{el}</option>
              <option value="Marian Noga">Marian Noga</option>
              <option value="Janek Kowalski">Janek Kowalski</option>
            </select>
          )
        }
        {
          Object.keys(this.state.distribution).map((el,i) =>
            <Field
              key={i}
              field={el}
              label={el}
              type='number'
              value={this.state.distribution[el]} 
              onChange={this.onChange} />    
              )
        }
        <select
          name="risk"
          onChange={this.onChange}
          value={this.state.risk}
        >
          <option value="" disabled>risk</option>
          <option value="safe">safe</option>
          <option value="normal">normal</option>
          <option value="risk">risk</option>
          </select>
          <label><input name="default" type="checkbox" value={this.state.default} onChange={this.onChange} /> Set as default lineup</label>
      </div>
    )
  }
}

export default MatchForm

Answer 1

如果它只是一个受控输入，而没有其他UI逻辑，我会做一些简单的事情：

<input type="text"
  name="email"
  value={this.state.email}
  onChange={e => this.setState({ email: e.target.value })}
/>

Answer 2

您可以为onChange onChange={this.onChange.bind(this, 'lineup', el)}函数为每个字段设置不同的值：

onChange

然后，如果你像这样写onChange(field, name, e) { this.setState({[field]: { ...this.state[field], [name]:e.target.value } }); }：

div

您现在应该可以为每个字段重复此操作。

Answer 3

您还可以尝试使用_.set来处理更复杂的用例。好的是，单独设置的功能可以下载为npm package

<input type="text" name="lineup.receiver1" onChange={handleChange} value={this.state.lineup.receiver1} />

import update from "lodash.set"; const handleChange = (ev) => { update(this.state, ev.target.name, ev.target.value ) }

_.set有更复杂的更新嵌套对象的选项，可以在我们的情况下使用字段的HTML name属性。

嵌套表单状态和React中的一个onChange函数

3 个答案: