チェックボックスの内部状態を無効にする

Question

チェックボックスの機能が私の期待するものではないことに驚いています。 onClickのラッパーdivがあり、チェックボックス以外の何かをクリックすると、期待通りに機能します。しかし、チェックボックスをクリックすると、proppが渡されたにもかかわらず、チェックボックスは同じ状態にとどまります。私の推測では、小道具の変更がプッシュダウンされた後、チェックボックスが内部更新イベントを発生させているということです。

const ToDo = (props) => { 
    const { title, done, onChange } = props; 

    const handleChange = (event) => { 
    event.preventDefault(); 
    if (onChange) { 
     onChange(!done) 
    } 
    } 

    return (
    <div onClick={handleChange}> 
     <label> 
     <input type="checkbox" checked={done}/> {title} 
     </label> 
    </div> 
); 
}; 

これを処理する正しい方法は何ですか？

Answer 1

これは私が簡単に理解できる回避策です。別のキーを渡すとはチェックボックスコンポーネントを別のdomアイテムとして強制的に再描画するため、動作しますが、これを行うより良い方法があるようです。私は、テキスト入力を使用するときにはこれが必要ではないことを知っています。

const ToDo = (props) => { 
    const { title, done, onChange } = props; 

    const handleChange = (event) => { 
    event.preventDefault(); 
    if (onChange) { 
     onChange(!done) 
    } 
    } 

    return (
    <div onClick={handleChange}> 
     <label> 
     <input key={done} type="checkbox" checked={done}/> {title} 
     </label> 
    </div> 
); 
}; 

Answer 2

何が起こっているように見えることは、あなたがラベルをクリックすると、それはチェックボックスのonChange関数を呼び出すともdivののonClickだということです。この周り

簡単な方法としては、これだけonClickは（私はあなたが入力自体に親のonClickの代わりに、onChange必要があるいくつかの理由があると仮定）と呼ばれ、ラベル上のポインタ・イベントを無効にすることです。

イベントが伝播するのを止めるもう1つの方法がありますが、複数のハンドラを扱う必要があるので、CSSの方法は簡単な修正のようです。ここで

はデモです：

class App extends React.Component { 
 
    state = { 
 
    done: false 
 
    } 
 
    
 
    onCheckDone = (done) => { 
 
    this.setState({ 
 
     done 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <ToDo 
 
     title="hello" 
 
     done={this.state.done} 
 
     onChange={this.onCheckDone} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
const ToDo = (props) => { 
 
    const { title, done, onChange } = props; 
 

 
    const handleChange = (event) => { 
 
    event.stopPropagation(); 
 
    if (onChange) { 
 
     onChange(!done) 
 
    } 
 
    } 
 
    
 
    return (
 
    <div className="clicker" onClick={handleChange}> 
 
     <label> 
 
     <input type="checkbox" checked={done} /> {title} 
 
     </label> 
 
    </div> 
 
); 
 
}; 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('app') 
 
);

.clicker { 
 
    border: solid 1px #ccc; 
 
    padding: 10px 20px; 
 
} 
 

 
label { 
 
    pointer-events: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>