反应。如何在按钮和页面点击上隐藏结果答案

【问题标题】：Reactjs. How to hide results on button and Page Click反应。如何在按钮和页面点击上隐藏结果
【发布时间】：2018-12-07 22:01:36
【问题描述】：

Reactjs.如何隐藏按钮和页面点击的结果

我知道这个问题可能听起来很简单，但我很绝望。以下 Reactjs 代码显示用户记录。

这就是我想要实现的。

如何使用reactjs隐藏结果时：

1.) 用户点击页面上的任意位置。

2.) 当用户使用隐藏按钮时。

有人可以帮助我吗？谢谢

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>



<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>


<label id="rootsearch"></label>

    <script type="text/babel">

class NameForm extends React.Component {

  constructor(props) {
    super(props);

this.state = { data : []}

  }

componentDidMount() {

 this.setState({
           data: [{"id":"1","firstName":"john ","lastName":"Markatti"},
{"id":"2","firstName":"luke","lastName":"henry"}]
        });

}


render() {
    return (
      <span>
        <h2>
How to Hide Result when a user clicks on the Page or on the Hide button
           </h2>



<ul>

<button className="btn btn-primary">Hide Result</button><br />

            {this.state.data.map((person, i) => (

              <li key={i}>
                {person.lastName} - {person.firstName} 
              </li>
            ))}
          </ul>

      </span>
   );    
}

}


ReactDOM.render(
  <NameForm />,
  document.getElementById('rootsearch')
);


 </script>



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


   </body>
</html>

更新

为了在用户单击按钮时隐藏结果，我尝试了以下代码但收到错误意外令牌

getInitialState: function() {
        return { data: false };
    },

    onClick: function() {
        this.setState({ data: true });
    },

In the render method I have this

<button  onClick={this.onClick}>Hide Result</button><br />

【问题讨论】：

发布的问题似乎根本没有包含any attempt 来解决问题。 StackOverflow 期待您 try to solve your own problem first，因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容，以说明您在minimal reproducible example 中遇到的特定问题。欲了解更多信息，请参阅How to Ask 并拨打tour。
您好 FrankerZ 先生，我已经更新了我的帖子。谢谢

标签： reactjs

【解决方案1】：

这就是我能够解决隐藏和显示结果问题的方法。在构造函数中的状态下，我根据下面的代码将显示变量设置为 true

this.state = { data : [],  showing: true }.

在 Render 函数中，我将此显示变量设置为 State。

 const { showing } = this.state;

在返回方法中，我按照下面的代码实现了隐藏和显示结果按钮

<button onClick={() => this.setState({ showing: !showing })}>Hide</button>

最后，我将显示变量附加到 map 方法以分别隐藏和显示结果

{showing && this.state.data.map((person, i) => (

              <li key={i}>
                {person.lastName} - {person.firstName} 
              </li>
            ))}

【讨论】：