首页 文章

反应多个复选框过滤器

提问于
浏览
2

昨天开始学习React以获得乐趣,我正在尝试制作一个简单的活动列表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>

    );

  }

});

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

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

我不得不将 ReactDOM.render 更改为 React.render 以使其完全运行,不知道为什么?

任何建议都会受到赞赏,就像我说我正在努力学习,所以任何好的文章或资源都会很棒,因为我发现很难用正确的React思维思考 . 谢谢 .

编辑:gravityplanx提到我没有提出问题,所以我想我没有说清楚!

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

1 回答

  • 5

    从您的应用程序组件中删除 isSelected . 它并没有真正为你做任何有用的事情 .

    相反,让您的孩子组件看起来像这样;

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

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

相关问题