Как изменить кнопки внутри таблицы реакции, используя оператор if и else? - PullRequest
Новая
       9

Как изменить кнопки внутри таблицы реакции, используя оператор if и else?

0 голосов
/ 10 января 2019

На моей веб-странице activJS есть эта таблица реакций с 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>
      )
    }
  ];
}

1 Ответ

0 голосов
/ 10 января 2019

Условный стиль

Наиболее простой способ условного моделирования - использовать объекты состояния и стиля, что будет объяснено ниже. Примечательные альтернативы условного стиля с более привлекательным синтаксисом и лучшей читабельностью: имена классов и стилизованные компоненты .

1) определить состояние

всякий раз, когда вы хотите изменить стиль в зависимости от значения, это значение должно быть частью состояния, так как любое изменение в состоянии вызывает повторную визуализацию

2) определить стиль вне функции рендеринга

при повторном рендеринге вы хотите получить доступ к стилям, не переопределяя их каждый раз.

3) назначить стиль в зависимости от состояния

затем вы назначаете нужный вам стиль в рамках троичного оператора if или переключаетесь, чтобы использовать его в своем HTML-элементе.

Пример * ** 1029 тысяча двадцать-восемь * // 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>
...