Question

昨天开始学习React以获得乐趣，我正在尝试制作一个简单的事件列表Web应用程序。我发现官方文档非常好，并且一直在关注他们的例子。

因此，我根据自己的需要剔除了他们的'反思中的思考' - [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提到我没有提出问题，所以我想我没有说清楚！

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

Answer 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。

反应多个复选框过滤器

1 个答案: