Question

我想通过对多个元素进行反应来隐藏一个元素。我尝试使用isHidden：true，但是当我单击关闭按钮而不是隐藏选定的元素时，会给我一个完整的空白页吗？为什么？

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
     data: [
       { _id: "5bb85a2be138230670c3687b", firstName: "foo", lastName: "foo", email: "foo@foo.com"},
       { _id: "5bb9b3cae13823261e886990", firstName: "bar", lastName: "bar", email: "bar@bar.com" },
     ],
     editVisibles: {},
     isHidden: true,
   };
 }

 showEditDiv = (_id) => {
   this.setState( prevState => ({
     editVisibles: { ...prevState.editVisibles, [_id]: !prevState.editVisibles[_id] }
     })
   )
 };

 toggleHidden = ()=> this.setState((prevState)=>({isHidden: !prevState.isHidden})) 

 renderFlight() {
   return this.state.data.map(item => {
     return (
       <div>
       {this.state.isHidden && 
        <li key={item._id}>
            <div class="close"  onClick={() => this.toggleHidden(item._id)}>X</div>
            <p>{item.email}</p>
            <button onClick={() => this.showEditDiv(item._id)}>Edit</button>
            <div key={item._id} className={`edit-form ${!this.state.editVisibles[item._id] ? "unvisible" : "visible"}`}>
            </div>
          </li>
        }
      </div>
    )
  }) 
 }
 render() {
   return (    
     <div>{this.renderFlight()}</div>
   );
 }
}
ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

首先，该代码确实很凌乱且难以阅读，因此您应该对其进行编辑以提高可视性。另外，请注意，当元素不可见时，isHidden为true，但是您的代码指出“如果this.state.isHidden为true，则呈现div的内容”。您想要的是!this.state.isHidden && ...

此外，您应该使用reduce / filter过滤掉具有isHidden真实值的元素，而不要使用map，因为现在您要推送空的div元素

Answer 2

在您的方法调用中可以看到一个参数-this.toggleHidden（item._id），但在函数定义中未使用item._id。有什么特殊原因吗？

toggleHidden = ()=>
    this.setState((prevState)=>({isHidden: !prevState.isHidden
}))

基本上，我们必须通过keyProp选择项目并应用toggle方法。经过 How to find element by Key in React?

<li keyProp={'listItem_'+item._id}>

将提供必要的属性，我们可以通过使用props.keyProp

选择对li元素进行显示/隐藏

通过react在多个元素中隐藏一个元素

2 个答案: