上書き合成UIライブラリ内のコンポーネント

Question

からイベントIは、ユーザがフォームに入力[タイプ=チェックボックス]を追加することを可能にするチェックボックスのクラスを持っている、スタイルは、余分な機能を追加します

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です。ハンドル変更イベントでは、それに応じて選択する要素のタイプを確認できます。

しかし、チェックボックスコンポーネントから放出されるイベントを上書きする方法はありますか？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

に変化します