Переписать синтетические события из компонента

Question

В библиотеке UI У меня есть класс 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