Überschreiben synthetische Ereignisse aus einer Komponente

Question

In einer UI-Bibliothek habe ich eine Checkbox-Klasse, die dem Benutzer erlaubt, eine input [type = Checkbox] zu einem Formular hinzuzufügen, es Stile und fügt zusätzliche Funktionalität:

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

Der Änderungshandler wird auf Formularebene ausgeführt.

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

Das synthetische Änderungsereignis von dem Eingang liefert ein Ereignisobjekt mit event.target.name und event.target.value. Die Checkbox hat stattdessen event.target.checked. Im Handle-Change-Event kann ich sehen, welche Art von Element es entsprechend wählt.

Aber gibt es eine Möglichkeit für mich, das Ereignis zu überschreiben, das von der Checkbox-Komponente ausgegeben wird, so dass event.target.value === event.target.checked?

Answer 1

Sie können den Wert CheckBox auf seinem onChange Ereignis ändern. Da das Ereignis in CheckBox vor dem Ereignis onChange aufgerufen wird, können Sie e.target formatieren, um zurückzugeben, was Sie möchten. Versuchen Sie folgendes:

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

Aber Vorsicht, e.target.value ändert sich nur in einen String "false" und "true", nicht Boolean