event.target.name给出了unifined

时间:2017-02-23 13:29:37

标签: javascript reactjs ecmascript-6 redux

当我尝试将输入组件中的值发送到console.log里面的handleumbit函数时,我接收到变量cName undefined的event.target.name。

 @connect((store) => {
            return {
                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();
                let cName = event.target.name;
                console.log(cName);
                this.props.dispatch(fetchWeatherData(cName));
            }

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

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

SearchBar组件

    const SearchBar = (props) => (
        <div>
            <label>{props.label}</label>
            <input name={props.name} type="text" defaultValue={props.value} placeholder={props.placeholder}/>
        </div>
    );
    export default SearchBar;

编辑:为什么不应该传递var undefined

1 个答案:

答案 0 :(得分:1)

您正在将带有e变量的事件传递给handleFormSubmit,因此event对象在那里未定义,并且因为它定义了no where,它将正确返回undefined

只需在e参数中将event更改为handeFormSubmit