点击React

时间:2017-11-21 06:51:00

标签: javascript asp.net-mvc reactjs

我是新手做出反应。如何在单击反应按钮后才渲染组件?

在我的例子中,单击一个按钮,我必须显示一个显示数据库中数据的表。

我已将下面的代码附加到您的参考中,第一个组件是按钮组件,下面是您可以找到该组件的组件。

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

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'))   

2 个答案:

答案 0 :(得分:9)

我已经设置了sandbox to showcase如何做到这一点。

本质上:

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

答案 1 :(得分:2)

你可以这样做。

首先使用属性显示初始化状态,并在组件安装时使用false。

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

添加一个功能来改变状态。 (您也可以使用此功能切换状态)

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

单击按钮调用该功能。

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

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

{
  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>
}

希望这有帮助!