Попытка создать функцию переключения для установки состояния 2 кнопок из отключенного в включенное на основе события onClick, присоединенного к третьей кнопке. - PullRequest
Новая
       37

Попытка создать функцию переключения для установки состояния 2 кнопок из отключенного в включенное на основе события onClick, присоединенного к третьей кнопке.

0 голосов
/ 01 апреля 2019

У меня есть набор из 3 кнопок, где мне нужно установить исходное состояние для двух кнопок как отключенных, а затем создать событие onClick для третьей кнопки, которое включит обе кнопки при нажатии.Я подумываю о том, чтобы установить атрибут disabled в состояние, а затем создать функцию для onClick, которая нацеливалась бы на состояние обеих кнопок и устанавливая его на false .Мой текущий код ниже, какие-либо идеи о том, как этого добиться? 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button } from 'antd';
import "antd/dist/antd.css";
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      disabled: undefined
    };
  }

  toggleSwitch(){
    alert("you clicked the switch");
  }

  render() {
    return (
      <div>
        <Button disabled={true}>Modify Docs</Button>
        <Button disabled={true}>Upload Docs</Button>
        <Button onClick={this.toggleSwitch}>Unlock Quote</Button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

1 Ответ

0 голосов
/ 01 апреля 2019

Ты почти у цели.

В вашем методе рендеринга вы установили disabled={true}, что означает, что он будет постоянно оставаться true вместо проверки значения свойства disabled в состоянии.

Метод переключения должен просто сводить на нет предыдущее значение отключено . 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button } from 'antd';
import "antd/dist/antd.css";
import './style.css';

class App extends Component {

  state = {
    disabled: true,
  };

  toggleSwitch() {
    // when toggling, we just negate the previous value
    this.setState(previousState => ({
      disabled: !previousState.disabled,
    }))
  }

  render() {
    // Buttons will use the same value from state
    // to check if they should be disabled
    const { disabled } = this.state;

    // instead of setting disabled={true}, reference the disabled
    // property from state
    return (
      <div>
        <Button disabled={disabled}>Modify Docs</Button>
        <Button disabled={disabled}>Upload Docs</Button>

        {/* we set the text of the button depending on the value of disabled */}
        <Button onClick={this.toggleSwitch}>
          {disabled ? 'Unlock Quote' : 'Lock Quote'}
        </Button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

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

...