首页 文章

React：根据某个按钮点击渲染某个元素

提问于
浏览 次
0

嗨，我有一个反应应用程序，我返回几个按钮 . 我想要做的是取决于您单击另一个组件将在视图中显示和呈现的按钮 . 我已经在文档中查看了条件渲染，但我不确定如何将其与状态联系起来并呈现我所期望的 . 下面是组件中的最新示例 .

// import all the components I need;

class FormContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
  dropdownVisible: false,
};
this.handleClick = this.handleClick.bind(this);

}

handleClick(event) {
if (!this.state.dropdownVisible) {
  document.addEventListener('click', this.handleOutsideClick, false);
} else {
  document.removeEventListener('click', this.handleOutsideClick, false);
}

this.setState(prevState => ({
  dropdownVisible: !prevState.dropdownVisible,
}));
}

handleOutsideClick(e) {
if (this.node.contains(e.target)) {
  return;
}
this.handleClick();
}

render() {
return (
  <form className="form-container">
    <h2>Browse The Database</h2>
    // here are the two buttons
    <button className="btn btn-default" onClick={this.handleClick}>
      By Fiscal Year
    </button>
    <button className="btn btn-default" onClick={this.handleClick}>
      By Research Organization
    </button>
    // depending on which one is clicked either of these table containers should render with the appropriate component passed in
    <div className="table-container">{this.state.dropdownVisible && <FiscalYearTable />}</div>
    <div className="table-container">
      {this.state.dropdownVisible && <ResearchOrganizationTable />}
    </div>
  </form>
);
}
}

export default FormContainer;

发生的事情是只有一个是渲染，因为我没有 Build 每个按钮和我想渲染的组件之间的关系 . 如何使用与状态绑定的条件if或其他方法 Build 此关系？

javascript reactjs

3 回答

  • 1

    查看下面的代码 . 我添加了另一个状态变量'view'，它从被单击的按钮获取视图的名称，并在render中检查要渲染的组件的状态值

    class FormContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dropdownVisible: false,
            view : ''
        };
    }

    handleClick = view => event => {
        if (!this.state.dropdownVisible) {
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
             document.removeEventListener('click', this.handleOutsideClick, false);
        }

        this.setState(prevState => ({
            dropdownVisible: !prevState.dropdownVisible,
            view
        }));
    }

    render() {
        return (
            <form className="form-container">
                <h2>Browse The Database</h2>
                <button className="btn btn-default" onClick={this.handleClick('view1')}>
                    By Fiscal Year
                </button>
                <button className="btn btn-default" onClick={this.handleClick('view2')}>
                    By Research Organization
                </button>

                <div className="table-container">
                    {this.state.view === 'view1' && <ResearchOrganizationTable />}
                </div>
            </form>
        );
    }
}
export default FormContainer;
    回复于
  • 0

    尝试一下switch语句 .

    getView(view) {
  switch(view) {
  case: view1
    return ResearchOrganizationTable />

    所以每个按钮都可以有一个onClick事件，它传递你想要getView的视图 .

    回复于
  • 0

    其他人建议的是，我之前也是这样做的，切换语句，基于按钮ID设置状态 . 这是你在找什么：

    import React, { Component } from 'react'


const ViewA = () => {
  return( <div>A VIEW</div>)
};
const ViewB = () => {
  return( <div>B VIEW</div>)
};
const ViewC = () => {
  return( <div>C VIEW</div>)
};
const ViewD = () => {
  return( <div>D VIEW</div>)
};


class App extends Component {
      constructor(props) {
        super(props);
        this.state = { 
          view: "A"
        };
     this.changeView=this.changeView.bind(this);   

  }

  changeView(e){
    console.log(e.target.id);
    this.setState({
      view: e.target.id
    })
  }

  renderButtons(){
    return (
      <div>
        <button id="A" onClick={this.changeView}>RENDER A</button>
        <button id="B" onClick={this.changeView}>RENDER B</button>
        <button id="C" onClick={this.changeView}>RENDER C</button>
        <button id="D" onClick={this.changeView}>RENDER D</button>
      </div>
    );
  }

  render() {
    const {view} = this.state;
    switch(view) {
      case "A":
      return(
        <div>
          {this.renderButtons()}
          <ViewA/>
        </div>
        )
      case "B":
      return(
        <div>
          {this.renderButtons()}
          <ViewB/>
        </div>
        )
      case "C":
      return(
        <div>
          {this.renderButtons()}
          <ViewC/>
        </div>
        )
      case "D":
      return(
        <div>
          {this.renderButtons()}
          <ViewD/>
        </div>
        )
    }

  }
}

export default App;
    回复于

相关问题