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

您可以在CheckBox事件中更改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>
  )
  }
 });

但请注意，e.target.value只会更改为字符串"false"和"true"，而不是Boolean

覆盖组件中的合成事件

1 个答案: