如何使用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 }));
  };