javascript - 控制 react 中的复选框

Question

我正在尝试在React中创建过滤器，我在其中操纵URL以根据颜色、成本等返回我的产品

它可以工作，所以如果你改变 ?color=red至?color=white在url中它将在页面上显示不同的产品

它还可以工作，如果您在我的复选框过滤器组件中选择颜色，它将更新 url，然后显示新产品。即点击red会将 url 从 /sport 更改为至/sport?color=red然后只返回带有红色的产品

但是这是我的问题

如果我手动更改网址，那么我希望选中该复选框，因此我尝试这样做:

checked={option.text === this.getParams() ? true : false}

这确实有效，但随后我就失去了实际选择和取消选择复选框的能力。我有什么想法可以让它同时做到这两点吗？我想同时使其成为受控和不受控组件？？

Answer 1

您需要将过滤器存储在状态中。就像在构造函数中一样，您可以使用查询参数初始化状态，然后在复选框更改时更改状态。

你可以尝试这样的事情。您需要根据您的使用情况更改此代码，这里我假设 this.getParams('color') 将返回所有选定颜色的数组。

构造函数状态初始化

constructor(props) {
  super(props);

  this.state = {
    filters: this.getParams('color') // consedering, it will return array
  }
}

默认选中复选框

defaultChecked ={this.state.filters.indexOf(option.text) === -1 ? false : true}
onChange={() => this.toggleCheckbox(option.text)}

用于切换它

// if not present, then add it
// else remove it
toggleCheckbox(option) {
  if (this.state.filters.indexOf(option) === -1) {
    this.setState({
      filters: [...this.state.filters, option]
    })
  } else {
    this.setState({
      filters: this.state.filters.filter(text => text !== option)
    })
  }
}