反应多个复选框过滤器答案

【问题标题】：React multiple checkbox filters反应多个复选框过滤器
【发布时间】：2016-10-01 05:08:45
【问题描述】：

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

所以我扼杀了他们的 'Thinking in React' - [http://facebook.github.io/react/docs/thinking-in-react.html] 教程以满足我自己的需要，但遇到了一个我无法解决的问题。

我想要多个复选框过滤器来更新数据表，但我无法掌握如何在管理必要道具的同时控制这些单独输入的状态。我想我明白为什么只选中一个复选框时所有复选框都会被勾选，因为它们是从父级 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>

    );

  }

});

这是我的 JSFiddle 的链接 - http://jsfiddle.net/zhpk99ky/

关于我提供的示例的注释，由于某种原因，复选框不会选择和过滤数据，但它们会在我的本地设置中进行 - 问题是即使过滤了数据，两个复选框都被选中，即使只有选择的值被传递。

我必须将 ReactDOM.render 更改为 React.render 才能让它运行，不知道为什么？

任何建议都将不胜感激，就像我说我正在努力学习是为了好玩，所以任何好的文章或资源都会很棒，因为我发现很难以正确的 React 思维方式思考。谢谢。

编辑：gravityplanx 提到我没有提出问题，所以我想我没有说得足够清楚！

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

【问题讨论】：

您的小提琴正在专门引入旧版本的 react 0.12。那是他们拆分成react-dom 包之前的时间。
那么问题是什么？
感谢 ctrlplusb。更新了正确的问题gravityplanx

标签： javascript checkbox reactjs

【解决方案1】：

从您的 App 组件中删除 isSelected。它并没有真正为你做任何有用的事情。

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

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

如果您想应用多个过滤器，请将 selectedFilter 更改为 selectedFilters 作为数组，并在您的更改处理程序中将字符串推送/弹出到它，并将过滤器道具中的 isChecked 更改为 .includes或.indexOf。

【讨论】：