javascript - 覆盖组件中的合成事件

Question

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

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

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？

Answer 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