Блог

Главная - Вопросы по программированию - Как отключить нажатую кнопку в списке повторов с помощью React

Как отключить нажатую кнопку в списке повторов с помощью React

#javascript #reactjs #react-native #repeater

Вопрос:

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

Это часть кода, я использую компоненты класса:

   constructor(props) {
    super(props);
    this.state = { isLoading: false };
  }
  
  
  handleFile(file) {
    const id = file.id; // maybe I can use this id?
    
    this.setState({ isLoading: true });
    if (document.statusCode == 200) {
      this.setState({ isLoading: false });
    } 
  }


  _renderButton(text, props) {
    const isFile = (props.type.toLowerCase() === 'file');
    return (
      <Row>
        {isFile amp;amp; (
          <Button disabled={this.state.isLoading} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} />
        )}
      </Row>
    );
  }

Как я могу отключить только нажатую кнопку с помощью react? Как использовать карту в этой ситуации?

Комментарии:

1. Вы должны добавить код, в который вы добавляете остальные кнопки. Вы ничего не делаете с этим удостоверением handleFile личности .

2. @Andy Да, я знаю, я привел это в качестве примера, есть ли способ использовать этот идентификатор для запуска кнопки?

Ответ №1:

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

 const { Component } = React;

class Example extends Component {

  constructor() {
    super();
    this.state = {};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    const { id } = e.target.dataset;
    this.setState({ ...this.state, [id]: true });
  }

  createButtons() {
    const jsx = [];
    for (let i = 0; i < 10; i  ) {
      const button = <button
        data-id={i}
        disabled={this.state[i]}
        onClick={this.handleClick}
      >Click me {i}
      </button>;
      jsx.push(button);
    }
    return jsx;
  }

  render() {
    return (
      <div>
        {this.createButtons()}
      </div>
    );
  }

}

ReactDOM.render(
  <Example />,
  document.getElementById("react")
); 
 button:disabled { color: red; opacity: 50%; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Метки: