Question

我知道我们通过道具将数据发送到子组件中，但是如何将数据发送回父组件？

我有一系列下拉框，可以在其中选择一个项目：

DropdownMenu.js

constructor(props) {
        super(props);
        this.state = {
            sortBy: null,

...

<DropdownMenu text="Sort by" isOpen={this.state.activeDropdown === "Sort_by"}
                                  onClick={this.showDropdown.bind(this, "Sort_by")}
                                  onMouseEnter={() => this.setState({mouseInDropdown: true})}
                                  onMouseLeave={() => this.setState({mouseInDropdown: false})}>
                        <div onMouseEnter={() => this.setState({mouseInDropdown: true})}
                             onMouseLeave={() => this.setState({mouseInDropdown: false})}>
                            <li>Name</li>
                            <li>Age</li>
                            <li>Value</li>
                        </div>
                    </DropdownMenu>
...

从 CompanyList.js

中调用

<li>

感谢您的答复，但是我如何将功能应用于下拉菜单的子项this.props.children（某些下拉菜单可能没有任何选项，而仅仅是按钮）？

std::sort

Answer 1

TL; DR-> https://reactjs.org/docs/faq-functions.html

只需将回调从父级传递给子级：

// parent component
(...)
myCallback(arg1){
    this.setState({val:arg1});
}

render(){

    return(
        <MyChildComponent onSpecificAction={this.myCallback.bind(this)} />
    );
}
(...)

// child component
(...)
render(){

    return(
        <button onclick={(e) => this.props.onSpecificAction('value to send up')}>Button text</button>
    );
}
(...)

Answer 2

与将prop传递给子元素的方式相同，还可以传递函数。

因此，您可以将诸如onChange(newData)之类的函数从父级传递到子级组件，每次值更改时都将调用它。

ReactJS将选择发送回父级

2 个答案: