尝试用 onChange 填充变量时未定义的变量

Question

我想 onChange 输入类型填充变量（我需要它作为 api 中的城市名称）。但是 onChange 它不断地在这条线上调用 "Uncaught TypeError: Cannot read property 'handleCityName' of undefined"

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

我正在尝试将应用转移到 redux。

这是剩余的代码

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.Change 你的函数 handleCityName.

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

2.Send这个函数给SearchBar加上props.

<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 来调度操作是个好主意。

尝试用 onChange 填充变量时未定义的变量

Undifined variable when trying to fill variable with onChange

javascript

ecmascript-6

reactjs

redux

react-redux