从子组件设置父状态

Question

我已经为此工作了几个小时，我不知道该怎么做才能使它工作。

我有一个父级组件，有一个孩子，这是一个模态对话。此对话框的日期选择器具有两个属性focused和onFocusChange。

render()方法之前父组件的相关部分：

class Terminkalender extends Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.setEventData = this.setEventData.bind(this);
    this.selectElementPatient = this.selectElementPatient.bind(this);
    this.handleDateChange = this.handleDateChange.bind(this);
    this.toggleFocus = this.toggleFocus.bind(this);
    moment.locale('de');
    this.state = {
      patient: null,
      appointments: [{end: '2018-08-25T11:57:27.512Z', title: 'TEST', start: '2018-08-25T11:57:27.512Z'}],
      time: '10:00',
      inputValue: ''
    }
  }

  componentDidMount() {
    this.setState({
      appointments: this.state.appointments.map(a => Object.assign({}, a, { end: new Date(a.end), start: new Date(a.start) })),
    });
  }

  setEventData(event) {
    this.setState({
      timeStart: event.start.getHours() + ":" + event.start.getMinutes(),
      timeEnd: event.end.getHours() + ":" + event.end.getMinutes(),
      date: event,
      disabled: true,
      modal: !this.state.modal
    });
  }

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

  handleDateChange(newDate) {
    this.setState({
      date: newDate
    });
  }

  toggleFocus(toggleFocused) {
    this.setState({
      focused: !this.state.focused
    });
  }

父组件中的子组件：

<AppointmentModal
    focused={this.state.focused}
    toggleFocus={this.toggleFocus}
    patient={this.state.patient}
    handleDateChange={this.handleDateChange}
    date={this.state.date}
 />

以下是使用focused和toggleFocus()的日期选择器：

  <SingleDatePicker
     inputIconPosition="after"
     block={false}
     numberOfMonths={1}
     date={this.props.date ? moment(this.props.date): null}
     onDateChange={date => this.props.handleDateChange(date)}
     focused={this.props.focused}
     onFocusChange={this.props.toggleFocus}
   />

我现在遇到的问题是，由功能toggleFocus切换的打开机制似乎无效。当我单击SingleDatePicker的字段时，我可以在控制台中看到focused被设置为true的两倍。

我需要更改什么，以便在单击该字段并触发toggleFocus()函数时，将focused设置为true，当我单击或单击一个日期时，它设置为false。

编辑：SingleDatePicker来自react-dates。

EDIT2，render（）方法：

render() {
    return (
      <div className="animated">
        <Card>
          <CardBody style={{height: '50em'}}>
            <Button type="submit" size="sm" color="success" className="mb-3 p-1"><i className="fa fa-plus"></i>  Neuer Termin</Button>
            <BigCalendar className="d-sm-down-none"
              {...this.props}
              selectable
              events={this.state.appointments}
              views={['month', 'week', 'day']}
              step={15}
              defaultDate={new Date(currYear, currMonth, 1)}
              defaultView='week'
              toolbar={true}
              messages={{month:"Monat", week:"Woche", day:"Tag", today:"Heute", previous:"Zurück", next:"Weiter"}}
              culture="de"
              onSelectSlot={this.setEventData}
              onSelectEvent={this.setEventData}
            />
            <BigCalendar className="d-md-none"
              {...this.props}
              selectable
              events={this.state.appointments}
              views={['day']}
              step={15}
              defaultDate={new Date(currYear, currMonth, 1)}
              defaultView='day'
              toolbar={true}
              messages={{day:"Tag"}}
              culture="de"
            />
            <AppointmentModal
              timeStart={this.state.timeStart}
              timeEnd={this.state.timeEnd}
              modal={this.state.modal}
              onChange={this.toggle}
              selectElementPatient={this.selectElementPatient}
              focused={this.state.focused}
              toggleFocus={this.toggleFocus}
              patient={this.state.patient}
              handleDateChange={this.handleDateChange}
              date={this.state.date}
            />
          </CardBody>
        </Card>
      </div>
    );
  }

编辑3：AppointmentModal组件：

class AppointmentModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <Modal isOpen={this.props.modal} toggle={this.props.onChange}>
        <ModalHeader toggle={this.props.onChange}>Neuer Termin</ModalHeader>
          <ModalBody>
            <FormGroup row>
              <Col md="3">
                <Label htmlFor="anfang">Zeit:</Label>
              </Col>
              <Col xs="12" md="9">
                <SingleDatePicker
                  inputIconPosition="after"
                  block={false}
                  numberOfMonths={1}
                  date={this.props.date ? moment(this.props.date): null}
                  onDateChange={date => this.props.handleDateChange(date)}
                  focused={this.props.focused}
                  onFocusChange={this.props.toggleFocus}
                  openDirection="down"
                  hideKeyboardShortcutsPanel={true}
                  placeholder="Tag"
                  displayFormat={() => moment.localeData().longDateFormat('L')}
                />
              </Col>
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.props.onChange}>Speichern</Button>{' '}
            <Button color="secondary" onClick={this.props.onChange}>Abbrechen</Button>
          </ModalFooter>
        </Modal>
    );
  }
}

export default AppointmentModal;