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

Question

这可能看起来有点基础，但我只是在学习如何使用 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);
};


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

    return (
        <div className='container'>
            <SearchBar/>
        </div>
    );
}

}

Answer 1

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

// in parent component
const setSearchValue = (search) => {
 // setState to search
 this.setState({search});
}

render (){
 return <>
  <SearchBar onsearch={this.setSearchValue} />
 </>
}


// in child component
// change your searchUpdate
searchUpdate = () => {
 const {onsearch} = this.state;
 // function call to pass data to parent
 this.props.onsearch(onsearch)
}

Answer 2

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

代码沙箱： https : //codesandbox.io/s/react-basic-example-vj3vl

家长

import React from "react";
import Search from "./Search";
export default class Parent extends React.Component {

  searchUpdate = search => {
    console.log("in parent", search);
  };

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

    return (
      <div className="container">
        <Search handleSearch={this.searchUpdate} />
      </div>
    );
  }
}

孩子

import React from "react";

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

  onChange = event => {
    this.setState({ search: event.target.value }, () => {
      console.log("in child", this.state.search);
      this.props.handleSearch(this.state.search);
    });
  };

  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}
          />
        </form>
      </div>
    );
  }
}

Answer 3

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

你可以这样做：

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>
    );
}

在父组件中：

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>
    );
}