Javascript 覆盖组件中的合成事件

在UI库中，我有一个Checkbox类，它允许用户向表单添加输入[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>
    )
  }
});

导出类复选框扩展了React.Component({
render（）{
返回(
{this.props.label}
)
}
});

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

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

导出类页面扩展React.Component({
手变（活动）{
让state={}；
状态[event.target.name]=event.target.value；
本.设置状态（状态）；
}
render（）{
}
})

来自输入的合成更改事件返回一个带有

event.target.name

和

event.target.value

的事件对象。该复选框改为选中了

event.target.

。在handlechange事件中，我可以看到它相应地选择了什么类型的元素

---

但是有没有一种方法可以覆盖从Checkbox组件发出的事件，以便

event.target.value==event.target.checked

？

您可以更改它的

onChange

事件上的

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

var CheckBox=React.createClass({
handleChange:函数（e）{
e、 target.value=e.target.checked
},
render:function（）{
返回(
{this.props.label}
)
}
});

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