Javascript 在 React 中单击按钮时显示组件

Display a component on clicking a button in React

提问by Praveen Mohan

I am new to react. How to render a component only after clicking a button in react?

我是新来的反应。如何仅在反应中单击按钮后才呈现组件？

Here in my case on clicking a button I have to display a table which displays the data from the database.

在我点击按钮的情况下，我必须显示一个表格，该表格显示数据库中的数据。

I have attached my code below for your reference, the first component is the button component and below that you can find the components for the table.

我在下面附上了我的代码供您参考，第一个组件是按钮组件，在下面您可以找到表格的组件。

Also I would like to know how to refresh a component on clicking a button without refreshing the entire page.

另外我想知道如何在不刷新整个页面的情况下单击按钮刷新组件。

var Button = React.createClass({
render: function () {
        return (
           <button type="button">Display</button>

            ); }
});

var EmployeeRow = React.createClass({

    render: function () {
        return (
            <tr>
                  <td>{this.props.item.EmployeeID}</td>
                  <td>{this.props.item.FirstName}</td>
                  <td>{this.props.item.LastName}</td>
                  <td>{this.props.item.Gender}</td>                                                   
              </tr>

            );
    }
});

  var EmployeeTable = React.createClass({

      getInitialState: function(){

          return{
              result:[]
          }
      },
      componentWillMount: function(){

          var xhr = new XMLHttpRequest();
          xhr.open('get', this.props.url, true);
          xhr.onload = function () {
              var response = JSON.parse(xhr.responseText);

              this.setState({ result: response });

          }.bind(this);
          xhr.send();
      },
      render: function(){
          var rows = [];
          this.state.result.forEach(function (item) {
              rows.push(<EmployeeRow key={item.EmployeeID} item={item} />);
          });
          return (
<Button />
  <table className="table">
     <thead>
         <tr>
            <th>EmployeeID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>               
         </tr>
     </thead>
      <tbody>
          {rows}
      </tbody>
  </table>

  );
  } });

  ReactDOM.render(<EmployeeTable url="api/Employee/GetEmployeeList" />,
          document.getElementById('grid'))   

回答by Raghudevan Shankar

I've set up a sandbox to showcasehow you can do this.

我已经设置了一个沙箱来展示您如何做到这一点。

In essence:

在本质上：

1. Initialise state with a boolean set to false
2. Render the component conditionally based on this boolean; so initially the component will now show up on the DOM
3. On some action (onClick), setStateon the boolean to true
4. The component will re-render since the state changed and will now show the hidden component (since the boolean has been set to true)

1. 使用布尔值初始化状态 false
2. 根据这个布尔值有条件地渲染组件；所以最初组件现在将显示在 DOM 上
3. 在某些操作 ( onClick) 上，setState在布尔值上true
4. 组件将在状态更改后重新渲染，现在将显示隐藏的组件（因为布尔值已设置为true）

回答by Edison D'souza

You can do something like this.

你可以做这样的事情。

First Initialize the state with a property showwith false when the component mounts.

首先在组件挂载时使用属性show初始化状态为false。

componentDidMount() {
  this.state = {
    show: false
  };
}

Add a function to change the state. (You can use this function to toggle state as well)

添加一个函数来改变状态。（您也可以使用此功能来切换状态）

showTable() {
  this.setState({
    show: true
  });
}

Call the function on click of the button.

单击按钮时调用该函数。

<button onclick="showTable()">
  Show Table
</button>

Add your table inside braces along with the expression like this.

将您的表格与这样的表达式一起添加到大括号内。

{
  this.state.show &&
  <table className="table">
     <thead>
         <tr>
            <th>EmployeeID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Gender</th>               
         </tr>
     </thead>
      <tbody>
          {rows}
      </tbody>
  </table>
}

Hope this helps!

希望这可以帮助！