Javascript 如何从Reactjs的外部调用主组件内部的方法
我需要调用cancelMethod,并从popover内部的按钮onClick调用参数。但是,我无法访问此方法。你能解释一下可以进入吗。如果是,我怎么做Javascript 如何从Reactjs的外部调用主组件内部的方法,javascript,reactjs,methods,react-big-calendar,Javascript,Reactjs,Methods,React Big Calendar,我需要调用cancelMethod,并从popover内部的按钮onClick调用参数。但是,我无法访问此方法。你能解释一下可以进入吗。如果是,我怎么做 const popover = ( <Popover id="popover-basic"> <Popover.Title as="h3">Cancel reservation</Popover.Title> <Popover.Content&
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>
);
}
}
您可以在类中定义函数Popover和Event,并使用此关键字调用函数
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>
);
}
}
一种方法是将其作为道具传递给popover,我将其重命名为PopoverInstance,因为popover已经被采用了。不幸的是,这有一个副作用,即必须将道具向下钻两层,而不是直接向下钻一层。另一种方法是引入外部状态,比如管理状态和方法的上下文或Redux。这肯定会有助于支柱钻井
如果在这个POPOF中只使用CopyLead方法,您也可以考虑将其移动到那里。
另外,我也不确定日历是如何工作的,所以当你看我在下面设置的示例时要考虑到这一点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>
);
}
}