Javascript react中的多状态变化

假设我的React应用程序上有一个设置屏幕，有三个设置

启用thingie

使用涂鸦

激活gizmo

处理来自所有这些控件的所有onchange事件的最佳方法是什么？这是我目前的情况

import React from 'react';
import Modal from 'react-bootstrap-modal';
 
export default class Settings extends React.Component {

  constructor (props) {
    super(props)
    this.state = { 
      open: false      
    }
    this.handleThingieChange = this.handleThingieChange.bind(this);
    this.handleDoohickeyChange = this.handleDoohickeyChange.bind(this);
    this.handleGizmoChange = this.handleGizmoChange.bind(this);
  }

  handleThingieChange(e) {
    this.props.onThingieChange(e.target.value)
  }

  handleDoohickeyChange(e) {
    this.props.onDoohickeyChange(e.target.value);
  }  

  handleGizmoChange(e) {
    this.props.onGizmoChange(e.target.checked);
  }  

  render() {
    return (
      <div>
        <label>enable thingie</label>        
        <input type="checkbox" checked={this.props.thingie} onChange={this.handleThingieChange}  />
        <label>use doohickey</label>
        <input type="checkbox" checked={this.props.doohickey} onChange={this.handleDoohickeyChange}  />
        <label>activate gizmo</label>
        <input type="checkbox" checked={this.props.gizmo} onChange={this.handleGizmoChange}  />
      </div>
    )
  }
}

---

我如何在react中做一些等效的事情？我不想花两个小时为每个设置编写处理函数

如果所有控件都只是复选框，那么为什么不为一个设置创建一个组件，然后让一个设置组件列出它们呢

您可以将设置的名称作为组件的属性提供，以便组件知道它正在更新什么。您可以将函数从设置组件传递到提供更新状态方法的设置组件

解决这个问题的一个更复杂的选项是使用Redux，但对于如此简单的事情可能不需要它（尽管它会在简化测试等方面提供很多好处）

---

不过，我建议，一旦您看到任何类型的重复模式，就尝试将其抽象为可重用组件，从长远来看，这肯定会节省您的时间。

啊，当然！即使它们不都是复选框，我也可以为单选按钮、滑块等制作另一个组件。

thingieChange(thingie){
    this.setState({ thingie: thingie })
}

doohickeyChange(doohickey){
    this.setState({ doohickey: doohickey })
}

gizmoChange(gizmo){
    this.setState({ gizmo: gizmo })
}

// render method is most important
// render method returns JSX template
render() {
    return (
      <form>
        <h2>headerooney</h2>
        <Settings 
            onThingieChange={this.thingieChange.bind(this)}
            onDoohickeyChange={this.doohickeyChange.bind(this)} 
            onGizmoChange={this.gizmoChange.bind(this)} />
      </form>
    );
}

  <div>
    <label>enable thingie</label>        
    <input type="checkbox" data-property='thingie' />
    <label>use doohickey</label>
    <input type="checkbox" data-property='doohickey' />
    <label>activate gizmo</label>
    <input type="checkbox" data-property='gizmo' />
  </div>

$(function(){

    $.each(options, function(k, v) {
        $("[data-property='" + k + "']")[0].checked = v;
    });

    $(document).on("click", "input[type='checkbox']", function(){
        var propertyName = $(this).data("property");
        options[propertyName] = $(this)[0].checked;
        console.log(options);
    })

});