ReactJS: How to use EventListener in child component created in parent

user_9722233 0
Viewed 1317
reactjs
2 Answers

You can pass event listner with props.
Here is example from documentation (look at onTemperatureChange property of TemperatureInput):

// Child
class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

// Parent
class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

user_57000240

If I understood the question correctly and you want to hide certain child elements based on the parents size, one way to do it could be setting a flag inside the state depending on the size of the parent:

handleResize = e => {
  if (this.state.navHidden === false && window.outerWidth > 500) {
    this.setState({ hidden: true })
  } else if (this.state.navHidden === true && window.outerWidth <= 500) {
    this.setState({ hidden: false })
  }
}

then, in your render function you could prevent children from being displayed like so:

render(){
    return(
       this.props.navigation.map(n=>{
         !(n.isBig && this.state.navHidden) && <NavigationList key={n.id} title={n.title} target={n.target} href={n.href}/>
       })
    )
}

n.isBig would be a flag that you set on the nav items to determine if those should be hidden in smaller screen sizes. But you probably have some sort of other measure to determine that.

Since what you are trying to do is display logic, you should also check if the desired behaviour can be done using plain CSS and media-queries.

user_39441200
Related