如何在 React js 中将 onChange 输入值传递给父组件

Question

I am trying to pass onChange input value from child component to parent component in react js. I pass with props. But in the component, it writes value as location: <input /> . As I understand it return value as object but when I try to convert with Json.stringfy it returns an error. So how can pass and set this value in parent component?

class Search extends Component {
  
  // Define Constructor
  constructor(props) {
    super(props);

  render() {
    return (
      <div>
        <Script    url="https://maps.googleapis.com/maps/api/jskey=Key&libraries=places"
          onLoad={this.handleScriptLoad}
        />
        <input onChange={(e)=>this.props.handleChangeSearch(e)} defaultValue={this.props.location} id="autocomplete" placeholder="search city..." 
          style={{
            margin: '0 auto',
            maxWidth: 800,
          }}
        />
      </div>
    );
  }
}

export default Search;

Main Component

class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: ""
    }
  }
  componentDidMount(){
    this.callLoc();
  }
  handleChangeSearch=(event)=> {
    // console.log(JSON.stringify(event.target)+" event");
    this.setState({location: event.target});
  }

  render() {
    return (
      <div id="main">
        <Script url="https://maps.googleapis.com/maps/api/js?key=your_api_key&libraries=places"          
      onLoad={this.handleScriptLoad}        />
         
        <h3 id="mainText">Choose Your Next Destination</h3>
        <div id='card'>
      <div class="input-group">
          <Search handleChangeSearch={this.handleChangeSearch} location={this.state.location}/>
          <Button onClick={this.searchLoc}>Search</Button>
          </div>
          <br></br>
          <Button onClick={()=>this.callLoc()} block>Near by Guides</Button>
        </div>

      </div>
    );
  }

Answer 1

event.target will just point to the element that generated this event, you need to use event.target.value to get the value of the input.

Answer 2

React uses synthetic events (or read here ), so passing the event object can lead to a stale object.

// Pass the value and not the event object
<input onChange={ (e) => this.props.handleChangeSearch(e.target.value) } />

// Fix the handler
handleChangeSearch = (value) => { ... }