変数をonChangeで塗りつぶすときに省略された変数

Question

入力型の変数を変更したい（私はapiで都市の名前に必要です）。それは常に呼んでいるのonChangeしかし：私はReduxのにアプリを転送しようとしている。このライン

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

に「捕捉されない例外TypeErrorを未定義のプロパティ 『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それこのfiddle上の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> 
    ); 

チェックコンソールログを持ちます。 しかし、入力onChangeを使ってアクションをディスパッチすることは良い考えではないと思います。