Undifined變量試圖填補變量與的onChange

Question

，當我想輸入型的onChange填寫變量（我需要它的API城市的名稱）。但是，它的onChange不斷呼籲：在這條線

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

我想要的應用程序轉移到終極版「遺漏的類型錯誤無法讀取的未定義的屬性‘handleCityName’」。

這是代碼

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; 

行動

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

減速

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

    return state; 
} 

Answer 1

1.更改你的函數handleCityName。

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

2.將此函數發送給帶有道具的SearchBar。

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

3.Call它的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> 
    ); 

檢查控制檯登錄此fiddle。 但我不認爲這是派遣與輸入的onChange行動是一個好主意。