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

Question

This may seem kind of basic but I'm just learning how to use React. Currently what I have going is when I type in the input field and submit, the system console logs my 'search' input. What I'm trying to do is pass my 'search' data from my child component to the parent. Looking for any tips or leads to the right direction.

This is what I have for my child component:

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

}

And in my Parent component (nothing much at the moment)

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

The simplest way would be to pass a function from parent to child:

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

Just have a function that is passed as a prop to the child component. Let child component do the handle change part and pass the value back to the parent and then do whatever you want to with the value

Code sandbox: https://codesandbox.io/s/react-basic-example-vj3vl

Parent

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

Child

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

Generally to pass data from child component to Parent Component, you can pass a reference of a function as props to child component from parent component and call that passed function from child component with data.

You can do something like this:

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

In parent component:

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