子组件中的回调方法更新父状态但不传递它的道具

Question

我是React的新手并试图创建一个嵌套的复选框表单，如果选中父过滤器（即Tropical），则会自动检查嵌套在下面的子项。当用户点击提交时，我可以获取所有选中的复选框值。有一个父过滤器组件，它是一个简单的表单，具有所选复选框的所有更新状态。

class ParentFilters extends React.Component {
    constructor(props) {
            super(props);
            this.state = {
            selectedFruit: [],
        selectedSport: []
      };
            this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.updateFruitSelection = this.updateFruitSelection.bind(this);
    }

        handleFormSubmit(e) {
            e.preventDefault();
      const formPayload = {
        Fruit: this.state.selectedFruit,
        Sport: this.state.selectedSport
      };
            console.log('Send this in a POST request:', formPayload);
    }

    updateFruitSelection(newSelectionArray){
            this.setState({ selectedFruit: newSelectionArray });
        }

    render(){
        return (
        <form onSubmit={this.handleFormSubmit}>
                <div className="panel-group" id="accordion">
                    <div className= "panel panel-default">

              <FilterByFruit
              updateFruitSelection = {this.updateFruitSelection}
              selectedOptions={this.state.selectedFruit} />

              <input type="submit" className="submitButton btn btn-default"         value="Submit"/>
            </div>
          </div>
         </form>
       );
    }
  }

在那里，我传入2个props，selectedFruits和一个回调函数来更新parentFilter中的selectedFruits状态。

FilterByFruit子组件如下所示：

class FilterByFruit extends React.Component {

    constructor(props) {
        super(props);
        this.checkOrUncheckAllSuboptions = this.checkOrUncheckAllSuboptions.bind(this);
        this.handleFruitSelection = this.handleFruitSelection.bind(this);
    }

    checkOrUncheckAllSuboptions(e) {
        var checkboxes = $('#tropicalFruitSuboptions input')
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = true;
            const newSelection = checkboxes[i].value;
            this.handleFruitSelection(newSelection);
        }
    }

    handleFruitSelection(e) {
        var newSelection
        if (e.target !== undefined) {
            newSelection = e.target.value;
        } else {
            newSelection = e;
        }
        let newSelectionArray;
        if (this.props.selectedOptions.indexOf(newSelection) > -1) {
            newSelectionArray = this.props.selectedOptions.filter(s => s !== newSelection)
        } else {
            newSelectionArray = [...this.props.selectedOptions, newSelection];
        }
        this.props.updateFruitSelection(newSelectionArray);
    }
render() {
        return (
  <div className="panel-heading">
    <label className="form-label panel-title">
      <a data-toggle="collapse" href="#fruits">Fruits</a>
    </label>

  <div id="fruits" className="checkbox-group panel-collapse collapse">
    <div className="list-group-item">

      <label key="Tropical" className="form-label capitalize">
        <input
        className="form-checkbox"
        onChange={this.checkOrUncheckAllSuboptions}
        value="Tropical"
        checked={this.props.selectedOptions.indexOf("Tropical") > -1}
        type={'checkbox'} />
        <a data-toggle="collapse" href="#tropicalFruitSuboptions"> Tropical</a>
      </label>

        <div id="tropicalFruitSuboptions" className="checkbox-group panel-collapse collapse indentOption">
          <label key="Pineapple" className="form-label capitalize">
            <input
              className="form-checkbox"
              onChange={this.handleFruitSelection}
              value="Pineapple"
              checked={this.props.selectedOptions.indexOf("Pineapple") > -1}
              type={'checkbox'} /> Pineapple
          </label>

          <label key="Guava" className="form-label capitalize">
            <input
              className="form-checkbox"
              onChange={this.handleFruitSelection}
              value="Guava"
              checked={this.props.selectedOptions.indexOf("Guava") > -1}
              type={'checkbox'} /> Guava
          </label>
        </div>

       </div>
     </div>
    </div>
    );
   }
 }

以下是我到目前为止的演示：

https://codepen.io/anon/pen/Ppdegw

如果我选择每个子滤镜（菠萝，番石榴），它会正确登录到selectedFruits。但是，当我选择父过滤器（Tropical）时，只勾选最后一个Guava复选框。看来即使我可以正确地将FilterByFruit组件中的回调prop函数用于我的父Filter组件并随后更新selectedFruit的状态，它也不会更新传递给FilterByFruit的selectedOptions={this.state.selectedFruit} />道具。另外，我宁愿不使用jQuery来选择和自动检查嵌套的复选框，还有更好的方法吗？