Как реализовать «проверить все» в ответ на дочерние компоненты?

Question

Я нашел пару вопросов здесь, что-то ответить на вопрос,

• select all
• managed state of controlled checkboxes

, но они не позволяют мне, чтобы сделать компонент с флажком.

То, что я хотел бы что-то вроде этого,

render: function() { 
    var rows = [<ChildElement key={1} />, <ChildElement key={2} />]; 
    return (
    <ParentElement>{rows}</ParentElement> 
    ); 
} 

где мои ChildElements имеют свои собственные флажки, которые могут быть установлены в checked=true или checked=false всякий раз, когда глобальный флажок или непроверенной на ParentElement.

Любые предложения? Cheers

Answer 1

Я собрал для вас суть, но основная идея состоит в том, чтобы поддерживать состояние флажков в родительском объекте и иметь обратный вызов в ребёнке, который переходит в измененное состояние.

http://jsfiddle.net/69z2wepo/4785/

var Row = React.createClass({ 
    getInitialState: function() { 
    return { 
     checked: false 
    }; 
    }, 
    checkIt: function() { 
    this.props.callback(this.props.index, !this.props.checked); 
    return; 
    }, 
    render: function() { 
    return (
     <tr> 
     <td><input type="checkbox" checked={this.props.checked} onChange={this.checkIt} /></td> 
     <td>{this.props.obj.foo}</td> 
     </tr> 
    ); 
    } 
}); 

var Table = React.createClass({ 
    getInitialState: function() { 
    var rowState =[]; 
    for(var i = 0; i < this.props.rows.length; i++) { 
     rowState[i] = false; 
    } 
    return { 
     checkAll: false, 
     rowState:rowState 
    }; 
    }, 
    checkRow: function (id,value) { 
    this.state.rowState[id] = value; 
    if (this.state.checkAll) { 
     this.state.checkAll = !this.state.checkAll; 
    } 
    this.setState({ 
     rowState: this.state.rowState, 
     checkAll: this.state.checkAll 
    }); 
    }, 
    checkAll: function() { 
    var rowState =[]; 
    var checkState = !this.state.checkAll; 
    for(var i = 0; i < this.state.rowState.length; i++) { 
     rowState[i] = checkState; 
    } 

    this.state.checkAll = checkState; 

    this.setState({ 
     rowState: rowState, 
     checkAll: this.state.checkAll 
    }); 
    }, 
    render: function() { 
    var self = this; 

    var rows = _.map(this.props.rows, function(row,index) { 
     return (<Row obj={row} index={index} key={row.id} checked={self.state.rowState[index]} callback={self.checkRow} />); 
    }); 
    return (
     <div className="table-holder container"> 
     <input type="checkbox" checked={this.state.checkAll} onChange={this.checkAll} /> 
     <table className="table">{rows}</table> 
     </div> 
    ); 
    } 
}); 

var rows = [ 
    { 
    'id' : 1, 
    'foo': 'bar' 
    }, 
    { 
    'id' : 2, 
    'foo': 'baarrrr' 
    }, 
    { 
    'id' : 3, 
    'foo': 'baz' 
    } 
]; 

React.render(<Table rows={rows}/>, document.getElementById('container'));