Question

我正在尝试通过动作创建者将表单数据提交给化简器，但它仍然无法正常工作。页面仍在重新加载。我无法抗拒。

下面是我的代码

import React, { Component } from 'react';
import { connect } from 'react-redux'
import {addName} from '../Actions/actionCreators'
class about extends Component {
    constructor(props){
        super(props)
    }
    render() {
        return (
            <div>
                <h2> About me </h2>

                <form action="" onSubmit={this.submitform}>
                    <br/>
                    <input type="text" name="name" placeholder="Your Name" />
                    <br/>
                    <input type="submit" value="Submit"/>
                </form>
            </div>
        );
    }
}
const mapDispatchToProps = dispatch => {
    return{
        submitform : (e) => {
            dispatch(addName(e.target.name.value))
        }
    }
}

export default connect(null, mapDispatchToProps)(about)

addName是接收数据（名称）的动作创建者

如果我正在使用它，也会发生错误'this.props.dispatch`不是函数

constructor(props){
    super(props)
    this.submithandle = this.submithandle.bind(this)
}
submithandle(e, dispatch){
    e.preventDefault()
    this.props.dispatch(addName(e.target.name.value))
}

我可以采取什么步骤通过mapDispatchToProps提交数据？

Answer 1

您不正确理解mapDispatchToProps。 mapDispatchToProps会将功能添加到组件的交付道具中。关于的道具看起来像这样：

{submitform: (e) => {dispatch(addName(e.target.name.value))}}

要调用Submitform属性，您必须使用this.props.submitform访问它。如果将其写入表单的onSubmit属性，则它应该可以工作。您还应该将react组件的名称设置为以大写字母开头，以便react可以区分它们在本机组件还是新组件之间。所以关于=>关于。希望这可以帮助。编码愉快。

Answer 2

您需要一个onSubmit事件处理程序。

this.handleSubmit(e)=>{
  this.props.addNameAction(e.target.value);
}

然后调度您应该在顶部导入的操作。

const mapDispatchToProps = dispatch => {
return{
    addNameAction : (name) => {
        dispatch(addName(name))
    }
}

}

分派表单数据时重新加载页面

2 个答案: