如何在 Reactjs 中从外部调用主组件内部的方法

Question

我需要cancelMethod从 Button onClick inside 使用参数调用popover。但是我无法访问此方法。你能解释一下是否可以访问。如果是，我该怎么做？

const popover = (
  <Popover id="popover-basic">
    <Popover.Title as="h3">Cancel reservation</Popover.Title>
    <Popover.Content>
     for <strong>canceling</strong> course. Click here:
     <Button onClick={cancelMethod()} variant='danger'>Cancel</Button>
    </Popover.Content>
  </Popover>
);

const Event = ({event}) => (
  <OverlayTrigger trigger="click" placement="top" overlay={popover}>
    <Button 
     style={{background:"transparent", border:"none"}}
    >{event.title} <br/> Lecture Room:{event.room}<br/> Teacher: {event.instructor}</Button>
  </OverlayTrigger>
);


export default class NewCalendarView extends Component {

  cancelMethod(id){
    alert("Hello"+id);
  }

  componentDidMount() {
    API.getLectures().then((res)=>{
      console.log(res)
       const cal=res.map((lec)=>{
         let lecture= {
           instructor: lec.teacherName,
          room: lec.room,
          title: lec.subject,
          startDate : moment(lec.date+"T"+lec.hour).toDate(),
          endDate:  moment(lec.date+"T"+lec.hour+"-02:00").toDate()
          }   
          return lecture;
      })
          this.setState({events:cal,loading:null,serverErr:null})
    }).catch((err)=>{
        this.setState({serverErr:true,loading:null})
    })
}
  constructor(props) {
    super(props);

    this.state = {
       events: []
    }
  }

  render() {
    return (
      <div style={{
        flex: 1
      }}>
        {console.log(this.state.events)}

        <Calendar
          localizer={localizer}
          events={this.state.events}
          startAccessor='startDate'
          endAccessor='endDate'
          defaultView='week'
          views={['month', 'week', 'day']}
          culture='en'
          components={{
            event: Event
          }}

          />
      </div>
    );
  }
}

Answer 1

您可以在类中定义 Popover 和 Event 函数，并使用 this 关键字调用该函数。

export default class NewCalendarView extends Component {
  cancelMethod(id){
    alert("Hello"+id);
  }

  componentDidMount() {
    API.getLectures().then((res)=>{
      console.log(res)
       const cal=res.map((lec)=>{
         let lecture= {
           instructor: lec.teacherName,
          room: lec.room,
          title: lec.subject,
          startDate : moment(lec.date+"T"+lec.hour).toDate(),
          endDate:  moment(lec.date+"T"+lec.hour+"-02:00").toDate()
          }   
          return lecture;
      })
          this.setState({events:cal,loading:null,serverErr:null})
    }).catch((err)=>{
        this.setState({serverErr:true,loading:null})
    })
}
  constructor(props) {
    super(props);

    this.state = {
       events: []
    }
  }

Popover = (
  <Popover id="popover-basic">
    <Popover.Title as="h3">Cancel reservation</Popover.Title>
    <Popover.Content>
     for <strong>canceling</strong> course. Click here:
     <Button onClick={cancelMethod()} variant='danger'>Cancel</Button>
    </Popover.Content>
  </Popover>
);

Event = ({event}) => (
  <OverlayTrigger trigger="click" placement="top" overlay={this.popover}>           // added the this keyword
    <Button 
     style={{background:"transparent", border:"none"}}
    >{event.title} <br/> Lecture Room:{event.room}<br/> Teacher: {event.instructor}</Button>
  </OverlayTrigger>
);

  render() {
    return (
      <div style={{
        flex: 1
      }}>
        {console.log(this.state.events)}

        <Calendar
          localizer={localizer}
          events={this.state.events}
          startAccessor='startDate'
          endAccessor='endDate'
          defaultView='week'
          views={['month', 'week', 'day']}
          min={new Date(2020, 1, 0, 7, 0, 0)} 
          max={new Date(2022, 1, 0, 21, 0, 0)}
          culture='en'
          components={{
            event: this.Event           // added the this keyword
          }}

          />
      </div>
    );
  }
}