체크 박스 내부 상태 우선 지정

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

이것은 쉽게 해결할 수있는 해결 방법입니다. key={done} 다른 키를 전달하면 체크 상자 구성 요소를 다른 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 기능 또한 사업부의 onClick를 부르고 있다는 것입니다. 이 약

쉬운 방법 중 하나는 너무에만 onClick가 (난 당신이 입력 자체에 부모에 onClick 대신 onChange 할 몇 가지 이유가 가정)라고 라벨에 포인터 이벤트를 비활성화하는 것입니다.

이벤트가 전파되는 것을 막을 수있는 또 다른 방법이 있지만 여러 핸들러를 다루어야하므로 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>

: 여기

는 데모입니다