如何在 Reactjs 中從外部調用主組件內部的方法

Question

我需要使用 popover 中 Button popover的參數調用cancelMethod 。 但是我無法訪問此方法。 你能解釋一下是否可以訪問。 如果是，我該怎么做？

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

您可以在class 中定義函數Popover 和Event，並使用此關鍵字調用function。

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

Answer 2

一種方法是將它作為 prop 傳遞給 popover（我將其重命名為 PopoverInstance，因為 Popover 已經被采用）。 不幸的是，這有一個副作用，那就是必須將道具向下鑽兩層（而不是直接向下一層）。 另一種方法是引入外部 state（如 Context 或 Redux）來管理 state 和方法。 這肯定有助於螺旋槳鑽井。

如果cancelMethod只在這個 popover 中使用，你也可以考慮將它移到那里。

此外，我不確定 Calendar 是如何工作的，所以當您查看我在下面設置的示例時，請考慮到這一點。

const PropoverInstance = ({cancelMethod}) => (
  <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, cancelMethod}) => (
  <OverlayTrigger trigger="click" placement="top" overlay={<PopoverInstance cancelMethod={cancelMethod} />}>
    <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 event={???} cancelMethod={cancelMethod} />
          }}

          />
      </div>
    );
  }
}