Question

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 />

Answer 1

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

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

在“渲染”功能中，我将此显示变量设置为“状态”。

 const { showing } = this.state;

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

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

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

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

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

Reactjs。如何隐藏按钮和页面单击上的结果

1 个答案: