Reactstrap模态

Question

我想利用reactstarp modal的优势。我还在项目eslintrc中使用它。我表现出这样的错误 Line 17: Unused state field: 'modal' react/no-unused-state Line 26: Unused state field: 'modal' react/no-unused-state

这是我的代码

class AccountModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    const { state } = this.state;
    this.setState({
      modal: !state.modal,
    });
  }

  render() {
    const { state } = this.state;

    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Delete account</Button>
        <Modal isOpen={state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Deleting your account will remove all of
            your information from our database.
            This cannot be undone.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Delete Account</Button>
            {' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

我不知道为什么未使用状态。我已经从reactstarp文档中复制了上面的代码。

Answer 1

您没有正确访问状态。试试；

toggle() {
    const { modal } = this.state;
    this.setState({
      modal: !modal,
    }); 
}

您还应该能够像在render方法中一样访问modal属性。

说明

const { state } = this.state;

这意味着您正在“ this.state”中寻找名称为“ state”的属性，

this.state = {
   modal: false,
};

而“ this.state”中只有一个名为“ modal”的属性。