Не удается взаимодействовать между компонентами реакции

Question

Это для реактивного проекта JS (jsfiddle). Текстовое поле должно обновляться с флажком с проверкой true/false, но это не так. Может кто-нибудь объяснить, почему?

var AutoGenerateCheckbox = React.createClass ({ 
    getInitialState: function() { 
    return {checked: false}; 
    }, 
    update() { 
    this.state.checked = !this.state.checked; 
    alert(this.state.checked); 
    this.props.onUpdate(this.state.checked); 
    }, 
    render() { 
    return (
     <input type="checkbox" checked={this.state.checked} onChange={this.update} /> 
    ); 
    } 
}); 

var TBox = React.createClass({displayName: 'TextBox', 
    render: function() { 
    return (
     <div> 
     Checkbox value: {this.props.data} 
     </div> 
    ); 
    } 
}); 

var KApp = React.createClass({ 
    getInitialState: function() { 
    return {autoChecked: false}; 
    }, 
    handleAutogenChange: function(val) { 
    alert('handleAutogenChange:' + val); 
    this.setState({autoChecked : val}); 
    }, 
    render: function() { 
    return (
     <div> 
     <AutoGenerateCheckbox onUpdate={this.handleAutogenChange}/> 
     <TBox data={this.state.autoChecked}/> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <KApp />, 
    document.getElementById('content') 
); 

Answer 1

Причина вы не видите что-либо распечатаны происходит потому, что вы пытаетесь напечатать значение boolean здесь

<div> 
    Checkbox value: {this.props.data} 
</div> 

попробовать

<div> 
    Checkbox value: {this.props.data.toString()} 
</div> 

вместо этого.

В качестве дополнительного совета вам действительно не нужно удерживать состояние флажка как в своем собственном состоянии, так и в состоянии его родительского компонента. Вам действительно нужно только иметь его в состоянии родительского компонента.

Просмотреть fiddle Я сделал.

Answer 2

Реагировать не определяют логическое значение, чтобы быть для печати информации, попробуйте вместо этого:

<div> 
    Checkbox value: {this.props.data.toString()} 
</div>