Undefined Variable beim Versuch, Variable mit onChange

Question

zu füllen Ich möchte OnChange der Eingabe Füllvariable (ich brauche es für den Namen der Stadt in api). Aber onChange es ständig ruft: auf dieser Linie

<input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={this.handleCityName.bind(this)}/> 

Ich versuche, „Uncaught Typeerror kann nicht Eigentum‚handleCityName‘undefinierter lesen“ App redux zu übertragen.

Dies ist der Rest des Codes

Form_container.js

import React, {Component} from 'react'; 
     import SearchBar from '../components/SearchBar'; 
     import {connect} from "react-redux" 
     import {updateInfo} from "../actions/weather-apiActions"; 
     import {handleCityName} from "../actions/weather-apiActions"; 


     @connect((store) => { 
      return { 
       cityName: store.cityName.cityName, 
       nameOfCity:store.nameOfCity.nameOfCity, 
       weatherDescription:store.weatherDescription.weatherDescription, 
       windSpeed:store.windSpeed.windSpeed, 
       temperature:store.temperature.temperature, 
       maxTemperature:store.maxTemperature.maxTemperature, 
       minTemperature:store.minTemperature.minTemperature, 
      } 
     }) 

     class FormContainer extends Component { 

      handleFormSubmit(e) { 
       e.preventDefault(); 
       this.props.dispatch(updateInfo()); 
      } 

      handleCityName(value){ 
       this.props.dispatch(handleCityName(value)); 
      } 


      render() { 
       return (
        <div> 
        <form onSubmit={this.handleFormSubmit.bind(this)}> 
         <label>{this.props.label}</label> 
         <SearchBar 
          name="CityName" 
          type="text" 
          value={this.props.cityName} 
          placeholder="search" 
          onChange={this.cityName.bind(this)} 
         /> 

         <button type="submit" className="" value='Submit' placeholder="Search">Search</button> 
        </form> 
        </div> 
       ); 
      } 
     } 

     export {FormContainer}; 

Searchbar.js

import React from 'react'; 

    const SearchBar = (props) => (
     <div> 
      <label>{props.label}</label> 
      <input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={this.handleCityName.bind(this)}/> 
     </div> 
    ); 
    export default SearchBar; 

Aktion

export function handleCityName(value) { 
return { 
    type:"HANDLE_CITY_NAME", 
    results:{ 
     cityName: value, 
    } 
    } 
} 

Reducer

export default function reducer(state={ 
    cityName: "", 
}, action) { 
    switch (action.type){ 
     case "HANDLE_CITY_NAME": { 
      return {...state, 
       cityName: action.value, 
      } 
     } 
    } 

    return state; 
} 

Answer 1

1.Ändern Sie Ihre Funktion handleCityName.

handleCityName(e){ 
    let value = e.target.value; 
    this.props.dispatch(handleCityName(value)); 
} 

2.Senden Sie diese Funktion an SearchBar mit Requisiten.

<SearchBar 
    name="CityName" 
    type="text" 
    value={this.props.cityName} 
    placeholder="search" 
    onChange={this.handleCityName.bind(this)} 
/> 

3.Call es mit onChange

const SearchBar = (props) => (
     <div> 
      <label>{props.label}</label> 
      <input name={props.name} type={props.inputType} value={props.value} placeholder={props.placeholder} onChange={(e) => props.handleCityName(e)}/> 
     </div> 
    ); 

prüfen Konsolenprotokoll auf dieser fiddle. Aber ich denke nicht, dass es eine gute Idee ist, eine Aktion mit der Eingabe onChange zu versenden.