反应如何将方法发送到 childComponent

Question

我无法在反应中将方法从父母发送给孩子。我以前做过这个并且它有效......为什么它不再有效了？

我正在渲染这个：

<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>

这是我的方法：

    updateColumn(newSubject,dayId){

        console.log("tu som");

        console.log(this.state.schedule);

    }

我的模态：

 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>

        );

    }

}

这是我得到的警告：

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.

真的不知道是什么问题。谢谢帮助

Answer 1

class ParentComponent extends Component {&nbsp; &nbsp; passedFunction = () => {}&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; <ChildComponent passedFunction={this.passedFunction}/>&nbsp; &nbsp; }}class ChildComponent extends Component {&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; <div onClick={this.props.passedFunction}></div>&nbsp; &nbsp; }}您可以使用箭头功能来避免所有绑定。如果要绑定它，请在构造函数中绑定它，就像这样......在父组件中。constructor() {&nbsp; &nbsp; &nbsp; &nbsp; this.passedFunction = this.passedFunction.bind(this)&nbsp; &nbsp; }<ChildComponent passedFunction={this.passedFunction}/>我可以看到，在您使用的子组件中：update(){&nbsp; &nbsp; &nbsp; &nbsp;console.log("updating...");&nbsp; &nbsp; &nbsp; &nbsp;this.props.updatecolumn("test","test");&nbsp; &nbsp;}但是您对该功能的道具是 colupdate 即您应该使用update(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("updating...");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.porps.colupdate("test","test");&nbsp; &nbsp; &nbsp; &nbsp;}希望这可以帮助！