Javascript 将输入数据从子级传递到父级React.js

这似乎有点基本，但我只是在学习如何使用React。目前我要做的是，当我在输入字段中键入并提交时，系统控制台会记录我的“搜索”输入。我试图做的是将我的“搜索”数据从我的子组件传递给父组件。寻找正确方向的任何提示或线索

这是我的子组件的内容：

export default class SearchBar extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

onChange = event => {
    this.setState({ search: event.target.value });
};

onSubmit = event => {
    const { search } = this.state;
    event.preventDefault();
    console.log(search);
};

render() {
    return (
        <div className='search-bar'>
            <form onSubmit={this.onSubmit}>
                <input
                    className='search'
                    type='text'
                    placeholder='Search'
                    onChange={this.onChange}
                    search={this.props.search}
                    value={this.state.searchinput}
                    parentCallback={this.onChange}
                ></input>
            </form>
            <FontAwesomeIcon className='search-icon' icon={faSearch} />
        </div>
    );
}

export default class Parent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

searchUpdate = search => {
    console.log(search);
    this.setState({ ...state, search: search })
};


render() {
    console.log(this.props.search);

    return (
        <div className='container'>
            <SearchBar passSearchData={this.searchUpdate} />
        </div>
    );
}

导出默认类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”
};
}
onChange=事件=>{
this.setState（{search:event.target.value}）；
};
onSubmit=事件=>{
const{search}=this.state；
event.preventDefault（）；
控制台日志（搜索）；
};
render（）{
返回(
);
}

}

在我的父组件中（目前没有什么）

导出默认类父类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”
};
}
搜索更新=搜索=>{
控制台日志（搜索）；
};
render（）{
console.log（this.props.search）；
返回(
);
}

---

}最简单的方法是将函数从父级传递到子级：

//在父组件中
const setSearchValue=（搜索）=>{
//设置要搜索的状态
this.setState（{search}）；
}
渲染（）{
返回
}
//子组件中的
//更改您的搜索更新
搜索更新=（）=>{
const{onsearch}=this.state；
//将数据传递给父级的函数调用
this.props.onsearch（onsearch）
}

只需将一个函数作为道具传递给子组件即可。让子组件执行句柄更改部分，并将值传递回父组件，然后使用该值执行任何您想要的操作

代码沙盒：

父母亲

从“React”导入React；
从“/Search”导入搜索；
导出默认类父级扩展React.Component{
搜索更新=搜索=>{
console.log（“在父项中”，搜索）；
};
render（）{
console.log（this.props.search）；
返回(
);
}
}

小孩

从“React”导入React；
导出默认类搜索扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“
};
}
onChange=事件=>{
this.setState（{search:event.target.value}，（）=>{
log（“in child”，this.state.search）；
this.props.handleSearch（this.state.search）；
});
};
onSubmit=事件=>{
const{search}=this.state；
event.preventDefault（）；
控制台日志（搜索）；
};
render（）{
返回(
);
}
}

通常，要将数据从子组件传递到父组件，可以将函数的引用作为道具从父组件传递到子组件，并使用数据从子组件调用传递的函数

您可以这样做：

export default class SearchBar extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

onChange = event => {
    this.setState({ search: event.target.value });
};

onSubmit = event => {
    const { search } = this.state;
    event.preventDefault();
    console.log(search);
    this.props.passSearchData(search);
};

render() {
    return (
        <div className='search-bar'>
            <form onSubmit={this.onSubmit}>
                <input
                    className='search'
                    type='text'
                    placeholder='Search'
                    onChange={this.onChange}
                    search={this.props.search}
                    value={this.state.searchinput}
                    parentCallback={this.onChange}
                ></input>
            </form>
            <FontAwesomeIcon className='search-icon' icon={faSearch} />
        </div>
    );
}

导出默认类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”
};
}
onChange=事件=>{
this.setState（{search:event.target.value}）；
};
onSubmit=事件=>{
const{search}=this.state；
event.preventDefault（）；
控制台日志（搜索）；
this.props.passSearchData（搜索）；
};
render（）{
返回(
);
}

在父组件中：

export default class SearchBar extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

onChange = event => {
    this.setState({ search: event.target.value });
};

onSubmit = event => {
    const { search } = this.state;
    event.preventDefault();
    console.log(search);
};

render() {
    return (
        <div className='search-bar'>
            <form onSubmit={this.onSubmit}>
                <input
                    className='search'
                    type='text'
                    placeholder='Search'
                    onChange={this.onChange}
                    search={this.props.search}
                    value={this.state.searchinput}
                    parentCallback={this.onChange}
                ></input>
            </form>
            <FontAwesomeIcon className='search-icon' icon={faSearch} />
        </div>
    );
}

export default class Parent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

searchUpdate = search => {
    console.log(search);
    this.setState({ ...state, search: search })
};


render() {
    console.log(this.props.search);

    return (
        <div className='container'>
            <SearchBar passSearchData={this.searchUpdate} />
        </div>
    );
}

导出默认类父类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索：“”
};
}
搜索更新=搜索=>{
控制台日志（搜索）；
this.setState（{…state，search:search}）
};
render（）{
console.log（this.props.search）；
返回(
);
}

您不能将数据从子组件传递到父组件，只需将输入数据保存在父组件中，并将父组件传递到子组件。Micheal您只能将道具从父组件传递到子组件。然后如何访问子组件值。只需将onChange=event=>…从子组件移动到父组件，并将其作为p传递rop到儿童组件。快乐学习！

export default class Parent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        search: ''
    };
}

searchUpdate = search => {
    console.log(search);
    this.setState({ ...state, search: search })
};


render() {
    console.log(this.props.search);

    return (
        <div className='container'>
            <SearchBar passSearchData={this.searchUpdate} />
        </div>
    );
}