React input checkbox выбрать все компоненты

Question

Я пытаюсь установить флажок надлежащего реагирования, выберите все компоненты. Идея состоит в том, что есть компонент <InputCheckboxAll> и <InputCheckbox>, и я смогу проверить <InputCheckboxAll>, и все из <InputCheckbox> также будут выбраны.

У меня две проблемы.

• Если <InputCheckboxAll> проверяется, я не могу отменить любой из <InputCheckbox>.
• Если все отметки <InputCheckbox> проверены, необходимо проверить <InputCheckboxAll>.

Here's the example.

var InputCheckboxAll = React.createClass({ 
    handleChange: function (event) { 
    this.props.handleChange(event) 
    }, 
    render: function() { 
    return (
    <input 
      type='checkbox' 
      {...this.props} 
      onChange={this.handleChange} /> 
    ) 
    } 
}) 

var InputCheckbox = React.createClass({ 
    getInitialState: function() { 
    return { 
     checked: this.props.checked 
    } 
    }, 
    render: function() { 
    var checkedValue = this.props.allChecked ? true : this.state.checked 
    return (
    <input 
      checked={checkedValue} 
      type='checkbox' 
      {...this.props}/> 
    ) 
    } 
}) 

var Test = React.createClass({ 
    getInitialState: function() { return {allChecked: false}; }, 
    handleChange: function (event) { 
    var $elm = $(event.target) 
    var checked = $elm.prop('checked') 
    this.setState({ 
     allChecked: checked 
    }) 
    }, 
    render: function() { 
    return (
    <div> 
     Select All: <InputCheckboxAll handleChange={this.handleChange}/><br/> 
     <InputCheckbox allChecked={this.state.allChecked}/><br/> 
     <InputCheckbox allChecked={this.state.allChecked}/><br/> 
     <InputCheckbox allChecked={this.state.allChecked}/><br/> 
    </div> 
    ) 
    } 
}) 

React.render(<Test/>, document.body) 

Answer 1

Я думаю, что могут быть некоторые изменения в вашей реализации для достижения желаемых результатов в более React'esque форме.

Из чего вы должны избавиться, это класс InputCheckboxAll checkbox и allChecked проги из класса InputCheckbox. Флажок - относительно немой элемент, он не должен знать о таких понятиях, как Everything is selected.

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

var InputCheckbox = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     checked: false 
    } 
    }, 
    render: function() { 
    return (
    <input 
      checked={this.props.checked} 
      type='checkbox' 
      {...this.props}/> 
    ) 
    } 
}) 

состояние вашего приложения (такие понятия, как Все выбранные) должны управляться от главного приложения, сохраняя нижние элементы уровня без гражданства. Состояние основного приложения может просто представлять проверяется статуса каждого из флажков:

getInitialState: function() { 
     return { 
     // 3 checkboxes, all initialized as unchecked 
     checked: [false, false, false] 
     }; 
    }, 

Теперь вы можете воссоздать функцию рендеринга рисовать 3 флажков, плюс вашего выбор всего флажка. Каждый <InputCheckbox> может быть привязан к собственным данным в массиве this.state.checked. Когда изменяется <Inputcheckbox>, мы привязываем индекс к обработчику изменений, поэтому мы знаем, какой элемент массива нужно изменить.

render: function() { 
    // Recalculate if everything is checked each render, instead of storing it 
    var isAllChecked = this.state.checked.filter(function(c) { 
     return c; 
    }).length === this.state.checked.length; 

    return (
    <div> 
     Select All: <InputCheckbox 
       onChange={this.selectAll} 
       checked={isAllChecked}/><br/> 

     <InputCheckbox 
       checked={this.state.checked[0]} 
       onChange={this.handleChange.bind(this, 0)}/><br/> 
     <InputCheckbox 
       checked={this.state.checked[1]} 
       onChange={this.handleChange.bind(this, 1)}/><br/> 
     <InputCheckbox 
       checked={this.state.checked[2]} 
       onChange={this.handleChange.bind(this, 2)}/><br/> 
    </div> 
    ) 
    } 

Вам не нужно хранить любое состояние, связанное с Всеми выбранными. Вместо этого было бы лучше пересчитать, если все выбрано или нет во время каждого рендеринга. Когда установлен флажок Select All10, мы просто устанавливаем для каждого элемента this.state.checked значение true.

Это также имеет преимущество, когда вы вручную выбираете все флажки, флажок «Выбрать все» будет проверять себя.

Вот пример реализации: https://jsfiddle.net/rsupvxry/