如何使用react-redux捕获表单输入

Question

我已经阅读了一些关于此问题的stackoverflow答案，而我看到的答案要么需要使用另一个模块（反应形式），要么看起来很笨拙而且过于复杂。

以下代码的目标是简单地将表单的输入捕获为e.target.value并将信息记录到控制台。 问题是e.target.value返回未定义，我不知道为什么，也不知道使用react-redux捕获表单输入的推荐方法。 我想知道不使用第三方模块即可执行此操作的推荐方法。

import React, { Component } from 'react';
import { connect } from 'react-redux';



class Form extends Component {
    constructor(props){
        super(props)

        this.state = {
            data: ""
        }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e){
        this.setState({
            data: e.target.value
        })
    }

    render() {
        return (
        <div>

            <form onSubmit={this.props.togglePlayAction}>
            <input type="text" value = {this.state.data} onChange={this.handleChange}/>
            <input type="submit"/>
            </form>
        </div>
        );
    }
}




const mapDispatchToProps = (dispatch) => {
    return {
        togglePlayAction:(e)=>{
            e.preventDefault()
            console.log(e.target);        // form is output
            console.log(e.target.value); // undefined

        }
    }
}

export default connect(mapDispatchToProps)(Form);

Answer 1

handleChange(e){
        this.setState({
            data: e.target.value
        })
    }

this.set.state是异步的。 这是行不通的。 因为异步功能不会立即运行。 所以你应该这样处理：

 handleChange = e => {
    const note = e.target.value; //name what ever u want
    this.setState(() => ({ date:note }));
  };