Question

我正在构建一个React组件，当用户单击按钮时，该组件会显示div中已过滤的项目列表。只有点击时才会显示该div中的项目。但是，出于某种原因，每个部分的列表正在切换。

我做错了什么？

这是我的代码：https://codesandbox.io/s/6yr0jzlpwn

Answer 1

只需为每个按钮定义一个特定值，然后将其传递给状态

  <div>
    <h1>{this.state.title}</h1>

    <div>
      <button value={'1'} onClick={this.toggleWords}>肉</button>
      {this.state.showWords === '1' && (
        <ul>
          {this.state.list.filter(function(word) {
            return word[1] === "肉";
          }).map(function (word) {
            return <li>{word}</li>;
          })}
        </ul>
      )}
    </div>

    <div>
      <button value={'2'} onClick={this.toggleWords}>茶</button>
    {this.state.showWords === '2' && (
        <ul>
          {this.state.list.filter(function(word) {
              return word[1] === "茶";
            }).map(function(word) {
              return <li>{word}</li>;
            })}
        </ul>
      )}
    </div>

    <div>
      <button value={'3'} onClick={this.toggleWords}>日</button>
    {this.state.showWords === '3' && (
        <ul>
          {this.state.list.filter(function(word) {
            return word[0] === "日";
          }).map(function(word) {
            return <li>{word}</li>;
          })}
        </ul>
      )}
    </div>
  </div>

在toggleWords函数

中

toggleWords(e) {
    const clickedButton = e.target.value;
  if(clickedButton !== this.state.showWords){
      this.setState({ showWords: clickedButton })
    }else{
    this.setState({ showWords: '' }) // handle close list if double click
    }
  }

如果您想一次展开两个部分，您需要将showWords状态更改为数组，然后使用indexOf方法扩展部分

  <div>
    <h1>{this.state.title}</h1>

    <div>
      <button value={'1'} onClick={this.toggleWords}>肉</button>
      {this.state.showWords.indexOf('1') !== -1 && (
        <ul>
          {this.state.list.filter(function (word) {
            return word[1] === "肉";
          }).map(function (word) {
            return <li>{word}</li>;
          })}
        </ul>
      )}
    </div>

    <div>
      <button value={'2'} onClick={this.toggleWords}>茶</button>
      {this.state.showWords.indexOf('2') !== -1 && (
        <ul>
          {this.state.list.filter(function (word) {
            return word[1] === "茶";
          }).map(function (word) {
            return <li>{word}</li>;
          })}
        </ul>
      )}
    </div>

    <div>
      <button value={'3'} onClick={this.toggleWords}>日</button>
      {this.state.showWords.indexOf('3') !== -1 && (
        <ul>
          {this.state.list.filter(function (word) {
            return word[0] === "日";
          }).map(function (word) {
            return <li>{word}</li>;
          })}
        </ul>
      )}
    </div>
  </div>

然后在toggleWords函数中将删除数组中的值（如果存在），否则它将添加它

  toggleWords(e) {
    const clickedButton = e.target.value;
    if (this.state.showWords.indexOf(clickedButton) !== -1) { // deleting the value from array if exist
      this.setState(prevState => ({ showWords: this.state.showWords.filter(d => d !== clickedButton) }))
    } else {
      this.setState(prevState => ({ showWords: [...prevState.showWords, clickedButton] }))
    }
  }

如何在React中切换div中的已过滤列表项？

1 个答案: