Question

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

enable thingie
使用doohickey
激活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>
    )
  }
}

在我的<App>组件中：

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>
    );
}

我的应用可能有20或30个设置，似乎必须有更好的方法来做到这一点，而不是重复这种模式20-30次？

我有新的反应，如果我用jquery建立这个，我会做这样的事情：

  <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);
    })

});

我如何做出反应相当的事情？我不想花两个小时为每一个设置编写处理函数

反应中的多个状态变化

0 个答案: