覆盖来自组件的合成事件答案

【问题标题】：Overwrite synthetic events from a component覆盖来自组件的合成事件
【发布时间】：2016-04-04 04:32:19
【问题描述】：

在 UI 库中，我有一个 Checkbox 类，它允许用户将 input[type=checkbox] 添加到表单、设置样式并添加额外的功能：

export class Checkbox extends React.Component({
  render() {
    return(
      <div className="form-component">
        <input type="checkbox" 
          defaultChecked={this.props.value} 
          checked={this.props.value}
          name={this.props.name} />
        <label>{this.props.label}</label>
      </div>
    )
  }
});

更改处理程序在表单级别完成。

export class Page extends React.Component({
  handleChange(event) {
    let state = {};
    state[event.target.name] = event.target.value;
    this.setState(state);
  }
  render() {
    <form onChange={this.handleChange}>
      <Input value={this.state.value} name="input1" />
      <Checkbox value={this.state.value} name="checkbox1" />
    </form>
  }
})

来自输入的合成更改事件返回带有event.target.name 和event.target.value 的事件对象。该复选框有event.target.checked。在句柄更改事件中，我可以看到相应选择的元素类型。

但是有没有办法让我覆盖从 Checkbox 组件发出的事件，以便 event.target.value === event.target.checked？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以在 onChange 事件上更改 CheckBox 的值。因为CheckBox中的事件会在onChange事件之前被调用，所以你可以格式化e.target来返回你想要的。试试这个：

var CheckBox = React.createClass({
handleChange: function(e){
e.target.value = e.target.checked
},
render: function(){
    return (
    <div className="form-component">
    <input type="checkbox" 
      defaultChecked={this.props.value} 
      checked={this.props.value}
      name={this.props.name}
      onChange={this.handleChange}
      />
    <label>{this.props.label}</label>
     </div>
  )
  }
 });

但要小心，e.target.value 只是变成了字符串"false" 和"true"，而不是Boolean

【讨论】：