Question

我想在反应列表中隐藏一个特定的元素。

这是状态的样子：

 this.state = {
    lgShow: false,
    list: [ 
      { id:1, hidden: true },
      { id:2, hidden: true }
    ]
  };

这是组件的外观：

  props.list.map( result => (
     <button onClick={toggle(result.id)}> Hide </button>
     { result.hidden && <div id={result.id}> .... </div>  }
  ))

我想编写一个函数开关，它在App.js中搜索id并为该id更改hidden的值，就像这样（尽管在这种情况下，我无法设置setState（））。

 let toggle = id => {
    this.state.list.filter( val=>val.id===id ? val.hidden=!val.hidden )
 }

Answer 1

let toggle = id => {
  let newList = list.map(val => val.id === id ? { id: val.id, hidden: !val.hidden} : val);
  this.setState({list: newList})
}

您可以在切换到setState()的内部进行操作

Answer 2

您需要使用setState方法来更新list的状态，这是在react中更新DOM的唯一方法。每次状态/属性仅更改一次，DOM就会重新呈现。这就是React的工作方式。

我已经更新了toggle函数，现在它在list数组上进行了迭代，并切换了在id参数中传递的toggle(id)隐藏标志。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      lgShow: false,
      list: [ 
        { id:1, hidden: true },
        { id:2, hidden: true }
      ],
    };
  } // end of constructor
  
  toggle = (id) => {
    const list = this.state.list.map(item => {
      if (item.id === id) {
        return { ...item, hidden: !item.hidden }; 
      }
      return item;
    })
    this.setState({ list })
  } // end of toggle
  
  render() {
    return (
      <div>
        {list.map( result => (
          <>
            <button onClick={() => toggle(result.id)}> Hide </button>
            {result.hidden && <div id={result.id}>....</div>}
          </>
        ))}
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

P.S：我没有运行此代码，只是在记事本上进行了空运行。

如何隐藏反应列表中的特定元素？

2 个答案: