Reactjs 我想将输入值从表单传递到handleSubmit（）

我想将我的输入值从表单传递到handleSubmit（），当前我正在传递

e.target.value

，并且获取的错误不能是未定义的属性“value”

下面是我想从中获取值的表单代码块

 <Input
      label="Write a message..."
      name="message"
      type="text"
    />

完整代码供参考：

import React from 'react';
import SubMenu from './SubMenu';
import MessageForm from './form/MessageForm';
import { sendNewMessage } from '../../actions/messages.actions'
import {connect} from 'react-redux';


class Messages extends React.PureComponent {
    handleSubmit = (e) => {
       this.props.sendNewMessage(e.target.value);
      }

    render() {
        return (
            <section className="page-notifications"> 
                <SubMenu/>
                <MessageForm onSubmit={this.handleSubmit}/>
            </section>
        )
    }
}
    const mapDispatchToProps = dispatch => {
      return {
        sendNewMessage: (msg) => dispatch(sendNewMessage(msg)),
      }
    }

export default connect(null,mapDispatchToProps)(Messages)

从“React”导入React；
从“./子菜单”导入子菜单；
从“./form/MessageForm”导入MessageForm；
从“../../actions/messages.actions”导入{sendNewMessage}
从'react redux'导入{connect}；
类消息扩展了React.PureComponent{
handleSubmit=（e）=>{
this.props.sendNewMessage（例如target.value）；
}
render（）{
返回(
)
}
}
const mapDispatchToProps=调度=>{
返回{
sendNewMessage：（msg）=>调度（sendNewMessage（msg）），
}
}
导出默认连接（空，mapDispatchToProps）（消息）

这不是处理表单提交的方式。您的

messageForm

应该使用

onChange

处理程序更新您的状态。然后

handleSubmit

应

preventDefault（）

并使用已设置的状态值发送

sendNewMessage

操作

---

在这方面，这些方法非常有用。

您需要绑定从子组件获取值的方法

constructer(props){
super(props);
   this.handleSubmit = this.handleSubmit.bind(this);
}

---

现在您不应该得到未定义的错误，所以@Will建议我向我的handleSubmit（）添加值，它解决了我的问题，谢谢大家。 以下是我进行更改的代码段：

handleSubmit = (value) => {
      this.props.sendNewMessage(value);
      console.log(value)
    } 

所以我只需要传递“值”来处理提交。。。嗯，它起作用了

handleSubmit = (value) => {
      this.props.sendNewMessage(value);
      console.log(value)
    }