Условное отключение кнопки

Я пытаюсь автоматически отключить кнопку после того, как идентификатор достигнет определенного числа, скажем 7. Коды скомпилированы, но не могут быть выполнены, т.е. отключить кнопку в зависимости от условия. Использование React и Tailwind.

    <div className="mt-8 mb-16">
      <button
        id="BTS"
        onClick={handlePurchase}
        type="button"
        disabled={this.id >= 7 }
        className="inline-flex items-center ... "
      >
        Mint me a Marköbot!
      </button>
    </div>

Исходный код приложения находится в (строка 103)

Большое спасибо!

Разместил вопрос с подходом alt на Как объединить две кнопки в одну?


reactjs button disable
person Mark Tan    schedule 21.07.2021    source источник
comment
Обычно атрибут disabled имеет значение disabled   -  person Bharat    schedule 21.07.2021
comment
что не работает?   -  person Christian Fritz    schedule 21.07.2021

Ответы (3)


arrow_upward
0
arrow_downward

Это то, что вы имеете в виду, например, когда id достиг 7? он автоматически отключится?

import React from "react";

class Sample extends React.Component {
  constructor() {
    super();
    this.state = {
      id: 7,
    };
  }
  render() {
    return (
      <button disabled={this.state.id >= 7 ? true : false}>
        Sample Button
      </button>
    );
  }
}

export default Sample;
person Mohammad Khan    schedule 21.07.2021

arrow_upward
0
arrow_downward

В вашем коде this.id означает идентификатор кнопки? Почему вы не использовали дополнительное состояние для условного отключения?

Я видел ваш код, вы используете функциональный компонент, и я предполагаю, что this.id - это идентификатор кнопки

Вы можете создать новое состояние и использовать это состояние как условие, например

    const [buttonId, setButtonId] = React.useState(null)

    return(
        <button
          id="BTS"
          onClick={handlePurchase}
          type="button"
          disabled={buttonId >= 7 }
          className="inline-flex items-center ... "
        >
          Mint me a Marköbot!
        </button>
    )
person Ega Rifqi Saputra    schedule 21.07.2021
comment
Привет, Эга. Спасибо за ответ. this.id относится к идентификатору NFT, который в настоящее время создается смарт-контрактом. Я ищу способ отключить кнопку после того, как NFT (индексированный по идентификатору в смарт-контракте) достигнет определенного числа (которое будет зависеть от количества NFT, сгенерированных посредством контракта). Выходные данные приложения находятся на сайте botdapp.netlify.app. - person Mark Tan; 21.07.2021
comment
В любом случае, чтобы заставить этот встроенный код внутри ‹button /› работать? .... disabled = {this.id ‹= 6? ложная правда} .... - person Mark Tan; 21.07.2021
comment
Я думаю, что лямбда-выражение не должно возвращать false и true, потому что this.id <= 6 уже возвращает логическое значение - person Ega Rifqi Saputra; 21.07.2021

arrow_upward
0
arrow_downward

Удалось это решить. Обнаружено, что отсутствует часть handleClick, которая требуется для рендеринга this inline. Спасибо всем, кто высказал свои предложения. Поделитесь, если у вас есть более простое решение.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.id = 0;
    this.handleClick = this.handleClick.bind(this);
  }

handleClick() {
  this.setState(prevState => ({
    isToggleOn: !prevState.isToggleOn
  }));
}

render() {
  return (
    <button onClick={this.handleClick}
      disabled={this.id <= 9 ? true : false}>
        {this.id <= 9 ? 'X' : 'Y'}
    </button>
  );
}
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);
person Mark Tan    schedule 21.07.2021