[英]React how to send method to childComponent
Hi i have trouble to send method from parrent to child in react.嗨,我无法在反应中将方法从父级发送到子级。 I did this before and it works ... Why it no works anymore?
我以前做过这个,它有效......为什么它不再有效了?
I am rendering this:我正在渲染这个:
<div>
<ScheduleSelectModal colupdate={this.updateColumn.bind(this)} subject={this.state.selectedSubject} subjectslist={this.state.mySubjects} show={this.state.modalShow} onHide={this.changeModalState.bind(this)}>
</ScheduleSelectModal>
</div>
This is my method:这是我的方法:
updateColumn(newSubject,dayId){
console.log("tu som");
console.log(this.state.schedule);
}
My modal:我的模态:
ScheduleSelectModal extends Component {
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("modal props:");
console.log(this.props.subject);
}
update(){
console.log("updating...");
this.props.updatecolumn("test","test");
}
createList() {
let items = [];
if (this.props.subjectslist !== null)
this.props.subjectslist.map(subject =>
items.push(<Button key={subject.id} block className={"my-1"} onClick={this.update.bind(this)}>{subject.name} </Button>)
);
return items;
}
render() {
return (
<Modal
{...this.props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{this.renderHeader()}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<ButtonGroup vertical className={"w-100"}>
{this.createList()}
</ButtonGroup>
</Modal.Body>
</Modal>
);
}
}
And this is warning i am getting:这是我收到的警告:
index.js:1375 Warning: Invalid value for prop `colupdate` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.
Really don't know what the issue is.真的不知道是什么问题。 Thx for help
谢谢帮助
class ParentComponent extends Component {
passedFunction = () => {}
render() {
<ChildComponent passedFunction={this.passedFunction}/>
}
}
class ChildComponent extends Component {
render() {
<div onClick={this.props.passedFunction}></div>
}
}
You can use arrow function to avoid all the bindings.您可以使用箭头函数来避免所有绑定。 If you want to bind it, bind it in the constructor like so... in the parent component.
如果你想绑定它,像这样在构造函数中绑定它......在父组件中。
constructor() {
this.passedFunction = this.passedFunction.bind(this)
}
<ChildComponent passedFunction={this.passedFunction}/>
I could see that, in your child component you are using :我可以看到,在您使用的子组件中:
update(){
console.log("updating...");
this.props.updatecolumn("test","test");
}
but your props for that function is colupdate ie you should be using但是您对该功能的道具是 colupdate ,即您应该使用
update(){
console.log("updating...");
this.porps.colupdate("test","test");
}
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.