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

我正在制作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

类匹配形式扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
阵容：{
setter:“”，
接管人1:“，
接管人2:“，
攻击者：“”，
拦截器1:“”，
拦截器2:“”，
自由人：''
},
分布：{
接管人1:20，
破产管理人2:20，
袭击者：20，
阻拦者1:20，
blocker2:20
},
风险：“正常”，
默认值：false
};
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
this.setState（{lineup:{…this.state.lineup[e.target.name]：e.target.value}}）
}
render（）{
返回(
{
Object.keys（this.state.lineup）.map（（el，i）=>
{el}
玛丽安·诺加
科瓦尔斯基
)
}
{
Object.key（this.state.distribution）.map（（el，i）=>
)
}
风险
安全的
正常的
风险
设置为默认排列
)
}
}
导出默认匹配表单

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

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

this.setState（{email:e.target.value}）
/>

您可以使用

onChange

功能为每个字段设置不同的值：

onChange={this.onChange.bind（this'lineup'，el）}

然后，如果您这样编写

onChange

：

onChange（字段、名称、e）{
this.setState（{[field]：{……this.state[field]，[name]：e.target.value}）；
}

---

现在，您应该能够为每个字段重复该操作。

您还可以尝试

\uu设置
以获得更复杂的用例。好消息是，set函数本身就可以作为


从“lodash.set”导入更新；
const handleChange=（ev）=>{update（this.state，ev.target.name，ev.target.value）}

有更复杂的选项来更新嵌套对象，在我们的例子中可以与字段的HTML
name
属性一起使用。
通常我会有多个onChange函数，每个函数处理自己的输入部分。一个试图处理所有事情的大型函数可能看起来不那么重复，但从长远来看，它会使重构表单变得更加困难。