如何发送到其他组件onChange选择反应

Question

i just try to do something like that (when user select, continue to other component):

render() {
  return(
      <select onChange={(e)=> <CountrySelected countrySelected= 
        {e.target.value}/> }>
        {this.state.countryArray.map( (e) => <option> {e.name} </option>) }
      </select>
  );
}    

just if i can't do it, so pls continue reading the next code to tell me how can i solve the follow problem: The following code work well for me:

class App extends Component {

  state = {
    countryArray: [],
    selectedCountry: undefined
  };

  constructor(p) {
    super(p);

    // here i'm Initializing the this.state.countryArray
  }

  countrySelectionHandler=(countryName)=> {
    this.setState({ selectedCountry: 
      this.state.countryArray.find(e=>e.name===countryName) });
  }

  render() {
    return (
      <div>

        <CountryDropDown
          countryArray={this.state.countryArray}
          countrySelectionHandler={this.countrySelectionHandler} />

        {
          this.state.selectedCountry ?
       // this component just display on the screen the selectedCountry name
              <CountryName countryName={this.state.selectedCountry.name} />
            :
            <div> no country selected</div>
        }

      </div>
    );
  }
}

'CountryDropDown' component:

const countryDropDown = (p)=>(
  <select onChange={(e)=> p.countrySelectionHandler(e.target.value)}>
    {p.countryArray.map( (e) => <option> {e.name} 
    </option>) }
  </select>
)

but now when user select, it's will rerender 'CountryDropDown' components for no reason. so how can i tel react to rerender only this part:

{
  this.state.selectedCountry ?
    // this component just display the selectedCountry name
    <CountryName countryName={this.state.selectedCountry.name} />
    :
    <div> no country selected</div>
}

so the way i try to solve it: when user select, continue to other components(CountrySelected) and there render only 'CountryName' component

Answer 1

If you do not use PureComponent or custom shouldComponentUpdate lifecycle function. Children component will be re-rendered when parent component re-render.

 class CountryDropDown extends Component {

  shouldComponentUpdate(nextProps) {
    return (this.props.countryArray !== nextProps.countryArray)
  }
  render() {
    const { countrySelectionHandler, countryArray } = this.props
    return (
      <select onChange={countrySelectionHandler}>
        {countryArray.map((e) => <option> {e.name}
        </option>)}
      </select>
    )
  }
}

PureComponent

class CountryDropDown extends PureComponent {
  render() {
    const { countrySelectionHandler, countryArray } = this.props
    return (
      <select onChange={countrySelectionHandler}>
        {countryArray.map((e) => <option> {e.name}
        </option>)}
      </select>
    )
  }
}

PureComponent has shallow compare shouldComponentUpdate function by default.