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,
    }); 
}

您应该也可以像在渲染方法中一样访问模式属性。

说明

const { state } = this.state;

这意味着您要在 "this.state"、

中查找名称为 "state" 的属性

this.state = {
   modal: false,
};

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

Reactstrap 模态

Reactstrap modals

reactjs

reactstrap