如何使用 if 和 else 语句更改 react-table 内的按钮？答案

【问题标题】：How to change buttons inside react-table using if and else statement?如何使用 if 和 else 语句更改 react-table 内的按钮？
【发布时间】：2019-01-10 02:49:59
【问题描述】：

我的 reactJS 网页有这个带有 2 个按钮的反应表，我想在单元格列状态更改其值时更改这些按钮。

render() {
  const columns = [
    {
      Header: "Actions",
      accessor: "ID",
      Cell: ({ value }) => (
        <div style={buttonTablestyle}>
          <Button
            bsStyle="info"
            onClick={() => {
              if (window.confirm("You are approving this request after you press OK...")) {
                this.updateFunctionYES(value);
              }
            }}
          >
            Approve
          </Button>
          &nbsp;&nbsp;&nbsp;
          <Button
            bsStyle="warning"
            onClick={() => {
              if (window.confirm("You are rejecting this request after you press OK...")) {
                this.updateFunctionNO(value);
              }
            }}
          >
            Reject
          </Button>
        </div>
      )
    }
  ];
}

【问题讨论】：

这意味着如果有特殊情况你只需要第一个按钮，如果它改变了另一个按钮应该出现但第一个没有？

标签： reactjs react-table

【解决方案1】：

条件样式

条件样式最基本的方法是使用 state 和 style-objects，这将在下面解释。 classnames 和 styled components 是具有更漂亮语法和更好可读性的条件样式的值得注意的替代方案。

1) 定义状态

每当您想根据值更改样式时，该值应该是状态的一部分，因为状态的任何更改都会触发重新渲染

2) 在渲染函数之外定义样式

在重新渲染时，您希望访问样式而不是每次都重新定义它们。

3) 根据状态分配样式

然后，您可以在三元运算符、if 语句或 switch 中分配您需要的样式以在您的 html 元素中使用它。

示例

// define styles you want to use depending on state
const green = {
  background: 'green'
}

const red = {
  background: 'red'
}

class MyComponent extends React.Component {
  state = {
    toggle: false
  }

  handleClick() {
    // change state on click
    this.setState({
      toggle: !this.state.toggle
    });
  }
  
  render() {
    // state change triggers re-render
    // define style to be used depending on state
    let myStyle = this.state.toggle ? green : red;
    
    return <div>
      <div style={myStyle}>MyApp</div>
      <button onClick={this.handleClick.bind(this)}>click me</button>
    </div>;
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>

条件显示

如果您想有条件地隐藏/显示，您可以将display: none 添加到其中一种样式，或者使用状态仅返回您想要显示的 jsx。

class MyComponent extends React.Component {
  state = {
    toggle: false
  }

  handleClick() {
    // change state on click
    this.setState({
      toggle: !this.state.toggle
    });
  }

  render() {
    // state change triggers re-render
    let element1 = <div>element1</div>;
    let element2 = <div>element2</div>;
    // define object to be used depending on state
    let elementToUse = this.state.toggle ? element1 : element2;

    return <div>
      {elementToUse}
      <button onClick={this.handleClick.bind(this)}>click me</button>
    </div>;
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>

【讨论】：