बच्चे से माता-पिता को इनपुट डेटा पास करें React.js

माता-पिता से बच्चे तक एक समारोह पास करने का सबसे आसान तरीका होगा:

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

बस एक ऐसा कार्य है जो बाल घटक के प्रोप के रूप में पारित किया जाता है। चाइल्ड कंपोनेंट को हैंडल चेंज पार्ट करने दें और वैल्यू को वापस पैरेंट को पास करें और फिर वैल्यू के साथ जो चाहें करें

कोड सैंडबॉक्स: 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>
    );
  }
}