Question

我正在尝试禁用该按钮。仅当回答了部分中的所有问题后，才应启用NEXT按钮。我在按钮中提供了禁用属性并编写了逻辑，但是当用户回答第二个问题时。按钮自动启用。谁能建议我代码中有什么问题？

代码::

import React, { Component } from "react";
import Answers from "../Answers/Answers";
import CommonButton from "../Button/CommonButton";
import { Link } from "react-router-dom";
import { Button } from "semantic-ui-react";

// import questions from "../../data/answers";

class Section extends Component {
  state = {
    que1: "",
    que2: "",
    que3: ""
  };

  handleClick = event => {
    this.setState(
      {
        que1: event.target.attributes.getNamedItem("data-key").value
      },
      () => {
        console.log(this.state.que1);
      }
    );
  };

  handleClick2 = event => {
    this.setState(
      {
        que2: event.target.attributes.getNamedItem("data-key2").value
      },
      () => {
        console.log(this.state.que2);
      }
    );
  };

  handleClick3 = event => {
    this.setState(
      {
        que3: event.target.attributes.getNamedItem("data-key3").value
      },
      () => {
        console.log(this.state.que3);
      }
    );
  };

  render() {
    console.log(this.state);
    const { que1, que2, que3, buttonDisabled } = this.state;
    return (
      <>
        <p>1. I was stressed with my nerves on edge.</p>
        <Button.Group widths="5" onClick={this.handleClick}>
          <Button data-key="Never">Never</Button>
          <Button data-key="Occassionally">Occassionally</Button>
          <Button data-key="Often">Often</Button>
          <Button data-key="Very Often">Very Often</Button>
          <Button data-key="Always">Always</Button>
        </Button.Group>
        <span />
        <p>2. I lost hope and wanted to give up when something went wrong.</p>
        <Button.Group widths="5" onClick={this.handleClick2}>
          <Button data-key2="Never">Never</Button>
          <Button data-key2="Occassionally">Occassionally</Button>
          <Button data-key2="Often">Often</Button>
          <Button data-key2="Very Often">Very Often</Button>
          <Button data-key2="Always">Always</Button>
        </Button.Group>
        <p>3. I feel very satisfied with the way I look and act</p>
        <Button.Group widths="5" onClick={this.handleClick3}>
          <Button data-key3="Never">Never</Button>
          <Button data-key3="Occassionally">Occassionally</Button>
          <Button data-key3="Often">Often</Button>
          <Button data-key3="Very Often">Very Often</Button>
          <Button data-key3="Always">Always</Button>
        </Button.Group>
        <p />

        <Link to="/section2">
          <Button disabled={!que1 && !que2 && !que3}>NEXT</Button>
          {/* <CommonButton text={"NEXT"}  />{" "} */}
        </Link>
      </>
    );
  }
}

导出默认部分；

输出::

Answer 1

首先，您禁用按钮的条件不正确。正确的是

<Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

但是即使在那之后，用户仍然可以通过单击路由来更改路由，因为将按钮包裹在<Link>组件中，您将禁用按钮，而不是链接。对于这种用例，我建议给按钮一个onClick处理程序，并切实地更改路线。

<Button disabled={!que1 || !que2 || !que3} onClick={()=>{this.props.history(/path)}} >NEXT</Button>

Answer 2

您需要的是||条件，而不是&&

更改

  <Button disabled={!que1 && !que2 && !que3}>NEXT</Button>

收件人

 <Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

Answer 3

有两件事：

ButtonGroup似乎没有onClick props。您应该将它们放在Button上。
您的状况不好：
```
<Button disabled={!que1 || !que2 || !que3}>NEXT</Button>
```
当que1，que2或que3之一不好时，您要禁用此按钮。当所有3个都不是很好时，不是这样。

Answer 4

您的布尔逻辑不正确请尝试以下代码：

<Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

当状态为空时如何禁用按钮

4 个答案: