यह एक तरह से बुनियादी लग सकता है, लेकिन मैं अभी सीख रहा हूं कि रिएक्ट का उपयोग कैसे करें। वर्तमान में मैं जो जा रहा हूं वह यह है कि जब मैं इनपुट फ़ील्ड में टाइप करता हूं और सबमिट करता हूं, तो सिस्टम कंसोल मेरे 'खोज' इनपुट को लॉग करता है। मैं जो करने की कोशिश कर रहा हूं वह मेरे बच्चे के घटक से माता-पिता को अपना 'खोज' डेटा पास कर रहा है। किसी भी सुझाव की तलाश है या सही दिशा में ले जाता है।

मेरे पास मेरे बच्चे के घटक के लिए यही है:

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

}

0
Michael Lee 19 मार्च 2020, 08:58

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>
    );
}
0
Zaman 19 मार्च 2020, 09:16

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

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


0
Sagar More 19 मार्च 2020, 09:07

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

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

0
vr12 19 मार्च 2020, 09:19