javascript - setState 在react-bootstrap 模式中不起作用

Question

当我想使用setState时，它不起作用。例如关闭或打开引导模式。

这是我的index.js内容:

import App from "./Modal";

ReactDOM.render(<App />, document.getElementById("root"));

这是我的 Modal.js 内容:

import React, { Component } from "react";
import socket from "socket.io-client";
import Modal from "react-bootstrap/Modal";

const Socket = socket.connect("ws://127.0.0.1:3004");

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(event, type) {
    this.setState({ show: false });
  }
  render() {
    const { show } = this.state;
    return <Child onChange={this.onChange.bind(this, show)} />;
  }
}

class Child extends Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
    if (this._isMounted) {
      this.setState({ show: true });
      this.props.onChange(true, true);
    }
  }
  handleClose() {
    if (this._isMounted) {
      this.setState({ show: false });
      this.props.onChange(false, false);
    }
  }
  modal(response) {
    if (this._isMounted) {
      this.setState({ show: true });
      this.props.onChange(true, true);
    }
  }
  componentDidMount() {
    this._isMounted = true;
    Socket.on("message", data => this.modal(data));
  }
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">Modal Name</Modal.Title>
          </Modal.Header>
          <Modal.Body>Contents</Modal.Body>
        </Modal>
      </>
    );
  }
}

export default Parent;

但是 setState 不起作用。

看看我的例子: https://codesandbox.io/s/epic-herschel-344dl

演示: https://344dl.csb.app/

关闭按钮不起作用!

如何解决这个问题？

Answer 1

一些注意点:

• React-bootstrap Modal props show 正在接收 bool 类型值，而不是回调函数。
• 如果您想重用它，则无需在 child 内部编写处理程序函数。并且不需要 _isMounted。
• 使用公共(public)类字段语法(箭头函数)代替bind(this)可以减少代码量并获得更好的性能。

<小时/>

现在可以正常关闭模态框了。

import React, { Component } from "react";
import socket from "socket.io-client";
import Modal from "react-bootstrap/Modal";

const Socket = socket.connect("ws://127.0.0.1:3004");

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: true
    };
  }
  onChange = () => {
    this.setState(perv => { show: !prev.show });
  };
  render() {
    const { show } = this.state;
    return <Child onChange={this.onChange} show={show} />;
  }
}

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    Socket.on("message", data => this.modal(data));
  }
  render() {
    const { show, onChange } = this.props;
    return (
      <>
        <Modal
          size="lg"
          show={show}
          onHide={onChange}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">Modal Name</Modal.Title>
          </Modal.Header>
          <Modal.Body>Contents</Modal.Body>
        </Modal>
      </>
    );
  }
}

export default Parent;