Checkbox internen Zustand überschreiben Prop

Question

Ich bin überrascht, dass die Checkbox-Funktionalität ist nicht das, was ich erwarte zu passieren. Wenn ich ein Wrapper div mit einem onClick habe und auf alles außer dem Kontrollkästchen klicke, funktioniert es wie erwartet. Wenn ich jedoch auf das Kontrollkästchen klicke, bleibt das Kontrollkästchen im selben Zustand, auch wenn der übermittelte Stützpunkt aktualisiert wurde. Meine Vermutung ist, dass das Kontrollkästchen sein internes Update-Ereignis auslöst, nachdem die Prop-Änderung gedrückt wurde.

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

Ich frage mich, was ist der richtige Weg, damit umzugehen?

Answer 1

Dies ist das Workaround, das ich gefunden habe, um einfach zu sein und funktioniert. Das Übergeben eines anderen Schlüssels key={done} wird das erneute Rendern der Checkbox-Komponente als ein anderes Dom-Element erzwingen, so dass es funktioniert, aber es scheint, als sollte es einen besseren Weg geben, dies zu tun. Ich weiß, dass dies nicht erforderlich ist, wenn eine Texteingabe verwendet wird, da der Wert unabhängig davon bleibt, was die Requisite übergibt.

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

Was passiert zu sein scheint, ist, dass, wenn Sie auf dem Etikett klicken, es ruft das onChange Funktion des Kontrollkästchen, und auch die divs onClick.

Ein einfacher Weg, um dies ist Zeiger-Ereignisse auf dem Etikett zu deaktivieren, so dass nur die onClick genannt wird (ich nehme es aus irgendeinem Grunde Sie eine onClick statt onChange am Eingang selbst auf dem übergeordneten brauchen ist).

Es gibt wahrscheinlich eine andere Möglichkeit, das Ereignis zu stoppen, aber dann müssen Sie mit mehreren Handlern umgehen, so dass die CSS-Methode wie eine einfache Lösung scheint.

Hier ist eine Demo:

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>