从 React Js 中的 Hook Modal 调用 function

Question

我正在尝试从 React js 中的模态钩子调用函数（更新状态）。 但是，它不会更新 state。 但是，当我在 function 中写入警报时，它可以工作，但 setState 不能。 有什么问题？？？？

主要部件

this.state = {
      message: false
}

showMessage(){
  alert(" hhh");  //works
  // this.setState({message:true})  //does not work
}

<ExcludeHolidayModal confirmExHol={this.showMessage}/>

模态

function ExcludeHolidayModal(props) {
    const [show, setShow] = useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => {setShow(true)};
    const [date, setDate] = useState(new DateObject());

    const excludeHolidays = (dates) => {
      API.excludeHolidays(dates).then(() => {
          handleClose();
          setDate(new DateObject());
          props.confirmExHol();  //Calling function here <------------
        })
        .catch((err) => {
          if (err.status === 401) {
          }
        });
    }

    return (
      <>
        <Button onClick={handleShow} data-testid="help-button" variant="info">
            </Button>  
        <Modal
          show={show}
          onHide={handleClose}
          backdrop="static"
          keyboard={false}
        >
          <Modal.Header closeButton>
            <Modal.Title>Choose Holidays</Modal.Title>
          </Modal.Header>
          <Modal.Body>
          <DatePicker 
                value={date} 
                 onChange={setDate}
                 multiple={true}/>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="primary" onClick={() => excludeHolidays(date)}>Send</Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  export default ExcludeHolidayModal;

Answer 1

请试试这个：

this.state = {
      message: false
}

showMessage = () => {
  // alert(" hhh");  //works
  this.setState({message:true})  //does not work
}

<ExcludeHolidayModal confirmExHol={this.showMessage}/>