Question

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

以下代码的目标是简单地将表单的输入捕获为e.target.value，并将信息记录到控制台。问题是e.target.value返回undefined我不知道为什么，也不知道使用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 }));
  };

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

1 个答案: