Question

我在更改页面内容时遇到问题。我已经尝试了很多网络提示。

点：打开页面后，我想看到loadDepartment和一个按钮。如果我点击按钮＆＃34; emp＆＃34;。整页内容更改为loadEmployees。我需要这个而不刷新页面。

＆＃13;

componentDidMount() {
      return this.initializeContent("hie")
}

initializeContent(choose) {
      if(choose == "emp") {
          console.log("page choosed:", choose);
          return this.loadEmployees();
      }
      else if(choose == "hie") {
          console.log("page choosed:", choose);
          return this.loadDepartment();
      }
      else {
          console.log("not found user choice -", choose);
          return (<div>There is a problem with loading of hierarchy pagae</div>)
      }
  }
  
loadDepartment() {
  return (<div>apple</div>)
}
loadEmployees() {
  return (<div>orange</div>)
}
  
render() {
  return (<div>
        {this.componentDidMount()}
        <button className="userReq" data-name="emp" onClick={this.initializeContent.bind(this, "emp")}>blabla</button>
  </div>)
}

＆＃13;

Answer 1

您需要切换组件的内部状态。 render（）函数是特殊的，React使用返回值，但loadEmployees（）函数没有相同的特殊状态。这是你应该做的事情：

＆＃13;

var MyComponent = React.createClass({


      loadDepartment() {
        this.setState({
          view: "department"
        });
      },
      loadEmployees() {
        this.setState({
          view: "employees"
        });
      },

      render() {
        if (this.state.view === "employees") return <div>orange</div>;
        if (this.state.view === "department") return <div > apple </div>;
        return (<div>
          <button className = "userReq"
          data-name = "emp"
          onClick = { this.loadEmployees } >blabla </button> 
          </div>)
        }
      });

＆＃13;

每当调用setState（）时，组件都会自动重新呈现，并且它将使用this.state的新值来确定要呈现的内容。

ReactJS，按钮onClick后更改页面内容

1 个答案: