zu Kind Passing Funktion, die Toggle

Question

enthält Ich versuche Checkbox hinzufügen, um meine reagieren Komponente aber wenn ich versuche zu machen, nachdem ich aus den Daten ziehen aus holen sie sagt, dass Funktion

TypeError: Cannot read property 'props' of undefined at WeatherInfo 

Die Werte undifined wird kommen aus redux Minderer

Das ist mein App.js

toggleCheckboxChange() { 
    console.log("a"); 
} 

render() { 
    const { cityName, nameOfCity, weatherDescription, windSpeed, temperature, maxTemperature, minTemperature, toogleValue} = this.props; 


let weatherInfo; 

weatherInfo = <WeatherInfo 
     nameOfCity={nameOfCity} 
     weatherDescription={weatherDescription} 
     windSpeed={windSpeed} 
     temperature={temperature} 
     maxTemperature={maxTemperature} 
     minTemperature={minTemperature} 
     toggleValue={toggleValue} 
     onChange={() => this.toggleCheckboxChange()} 
    />; 

WeatherInfo Komponente

const WeatherInfo = (props) => (
<div> 
    <ul> 
     <li>{props.nameOfCity}</li> 
     <li>{props.weatherDescription}</li> 
     <li>{props.windSpeed} m/s </li> 
     <li>{props.temperature} °C</li> 
     <li>{props.maxTemperature}°C</li> 
     <li>{props.minTemperature}°C</li> 

     <input 
      type="checkbox" 
      checked={props.toogleValue} 
      onChange={this.props.toggleCheckboxChange} 
     /> 
    </ul> 
</div> 
); 

wie kann ich pass-Funktion onChange in Kind

Answer 1

Sie verwenden ein Functional Component, this Schlüsselwort wird nicht im Inneren, die zur Verfügung stehen, direkt die Funktion verwenden, wie folgt aus:

props.function

schreiben sie es wie folgt aus:

const WeatherInfo = (props) => (
    <div> 
     <ul> 
     <li>{props.nameOfCity}</li> 
     <li>{props.weatherDescription}</li> 
     <li>{props.windSpeed} m/s </li> 
     <li>{props.temperature} °C</li> 
     <li>{props.maxTemperature}°C</li> 
     <li>{props.minTemperature}°C</li> 

     <input 
      type="checkbox" 
      checked={props.myPokemon} 
      onChange={(e)=>props.toggleCheckboxChange(e)} 
     /> 
     </ul> 
    </div> 
); 

überprüfen sie folgendes Beispiel:

class App extends React.Component { 
 

 
    change(e){ 
 
     console.log(e.target.value); 
 
    } 
 

 
    render() { 
 
     return (
 
      <div> 
 
       <Child change={this.change.bind(this)}/> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
let Child = (props)=>{ 
 
    return <input onChange={(e)=>props.change(e)}/> 
 
} 
 

 

 
ReactDOM.render(<App />, document.getElementById('container'));

<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> 
 

 
<div id='container'/>

prüfen Sie diesen Artikel: https://www.reactenlightenment.com/react-state/8.4.html