Question

我在项目列表上有一个使用Map显示的值列表，它的子内容默认情况下是隐藏的，并且当我单击该特定项目时应该显示，现在当我单击某个项目时列出正在显示的所有隐藏子内容。

// show和hide是具有属性display：none和display：block

的CSS类。

class App extends Component {
      state={
        show: false
      }

      show = (e) => {
        this.setState({
          show: true
        })
      }
      render() {
      const list = [1,2,3,4,5];
        return (
          <div className="App">
            <ul> {list.map((item, index) => 

              <div key={index}> 
                <li onClick={this.show}> {item} </li>

                  <p className={this.state.show? "show": "hide"}> Hello </p>

              </div>)}</ul>
          </div>
        );
      }
    }

Answer 1

您必须维护每个子项目的状态以及现在进行的全局“显示”属性。

请注意，无论您单击哪个子项，当前如何更改状态下的一个布尔值，即“ show”属性。由于将其设置为true，因此这适用于您的子项的 all 。

有几种方法可以解决此问题，但不涉及单独制作Item Component的一种可能的解决方案是使用字典将每个子项目的状态保持在状态：

state = {
    items: {
        0: {show: false},
        1: {show: false},
    }
}
......./////////////
show = (index) => (e) => {
    const {items} = this.state;
    let updatedItems = [
        ...items.slice(0, index),
        {show: !items[index].show},
        ...items.slice(index + 1)
    ];

    this.setState({
        items: updatedItems
    });
}
......./////////////
<li onClick={this.show(index)}>

这似乎很冗长，但是如果您不想改变状态，则这是目前的最佳做法。

老实说，创建一个单独的Item组件可能会更容易，这样他们可以更轻松地维护自己的状态。

有关列表和键以及不变性的更多信息：

https://medium.freecodecamp.org/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5

https://reactjs.org/docs/lists-and-keys.html

显示单击的特定项目列表的子内容。

1 个答案: