Javascript 反应多个复选框过滤器

昨天开始学习React for Fund，我正在尝试制作一个简单的事件列表web应用程序。我发现官方文档非常好，并且一直在遵循他们的示例

所以，为了我自己的需要，我修改了他们的“反应中的思考”-[教程]，但遇到了一个我无法理解的问题

我希望有多个复选框过滤器来更新数据表，但我无法掌握如何在管理必要的道具时控制这些单独输入的状态。我想我理解为什么只有一个被选中时所有复选框都被勾选，因为它们是从父项isChecked道具获取状态的

var EventFilter = React.createClass({

  handleChange: function() {

    if (this.refs.isCheckedInput.checked) {

      this.props.onUserInput(
        this.refs.isCheckedInput.value,
        this.refs.isCheckedInput.checked
      );

    } else {
      this.props.onUserInput('', false);
    }

  },

  render: function() {

    return (
      <label>
        <input
          type="checkbox"
          value={this.props.value}
          checked={this.props.isChecked}
          ref="isCheckedInput"
          onChange={this.handleChange}
        />
        {this.props.value}
      </label>
    );

  }

});


var App = React.createClass({

  getInitialState: function() {

    return {
      selectedFilter: '',
      isChecked: false
    };

  },

  handleUserInput: function(selectedFilter, isChecked) {

    this.setState({
      selectedFilter: selectedFilter,
      isChecked: isChecked
    });

  },

  render: function() {

    return (

      <div className="app">

        <div>
          <EventFilter
            value="Bridgewater Hall"
            selectedFilter={this.state.selectedFilter}
            isChecked={this.state.isChecked}
            onUserInput={this.handleUserInput}
          />
          <EventFilter
            value="The Deaf Institute"
            selectedFilter={this.state.selectedFilter}
            isChecked={this.state.isChecked}
            onUserInput={this.handleUserInput}
          />
        </div>

        <EventTable
          selectedFilter={this.state.selectedFilter}
          listings={this.props.source}
        />

      </div>

    );

  }

});

var EventFilter=React.createClass({
handleChange:function（）{
如果（此.refs.isCheckedInput.checked）{
这个.props.onUserInput(
this.refs.isCheckedInput.value，
this.refs.isCheckedInput.checked
);
}否则{
此.props.onUserInput（“”，false）；
}
},
render:function（）{
返回(
{this.props.value}
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
selectedFilter:“”，
被检查：错误
};
},
handleUserInput：功能（已选择过滤器，已选中）{
这是我的国家({
selectedFilter:selectedFilter，
isChecked：isChecked
});
},
render:function（）{
返回(
);
}
});

这是我的JSFIDLE的链接-

关于我提供的示例，由于某些原因，复选框不会选择和过滤数据，但在我的本地设置中会选择和过滤数据-问题是，即使数据已过滤，也会选中两个复选框，即使只传递所选数据的值

我必须将

ReactDOM.render

更改为

React.render

，才能让它运行，不知道为什么

如有任何建议，我将不胜感激，正如我所说，我努力学习是为了乐趣，因此任何好的文章或资源都将非常好，因为我发现很难以正确的心态进行思考。谢谢

编辑：gravityplanx提到我没有提出问题，所以我想我没有把问题说清楚

---

我如何处理多个复选框状态，同时仍传递过滤数据所需的单个输入值？

Ditch

isSelected

来自您的应用程序组件。它实际上对您没有任何帮助

相反，让您的子组件看起来像这样

<EventFilter
            value="Bridgewater Hall"
            selectedFilter={this.state.selectedFilter}
            isChecked={this.state.selectedFilter === "Bridgewater Hall"}
            onUserInput={this.handleUserInput}
          />

---

如果要应用多个过滤器，请将

selectedFilter

更改为

selectedFilters

作为数组，并在更改处理程序中向其推送/弹出字符串，然后在过滤器道具中将

更改为
。包括
或
。indexOf
您的小提琴正在拉入旧版本的react 0.12 Specific是的。这是在他们拆分成
react dom
包之前。那么问题是什么？谢谢ctrlplusb。更新了适当的问题gravityplanx