我想将我的输入值从 Form 传递到 handleSubmit ()

Question

我想将我的输入值从表单传递到 handleSubmit ()，目前我正在传递 e.target.value 并收到错误 cannot 属性 'value' of undefined.

以下是我要从中获取值的表单代码块

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

以下是我尝试访问

下的值的代码块

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

完整代码供参考：

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)

Answer 1

这不是您处理表单提交的方式。您的 messageForm 应该使用 onChange 处理程序更新您的状态。然后 handleSubmit 应该 preventDefault() 并使用来自已设置的状态的值调度你的 sendNewMessage 操作。

React docs 在这方面很有帮助。

Answer 2

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

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

现在你不应该得到未定义的错误

Answer 3

所以@Will 建议我为我的 handleSubmit() 添加值，它解决了我的问题，谢谢大家。以下是我进行更改的代码片段：

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

我想将我的输入值从 Form 传递到 handleSubmit ()

I want to pass my input values from Form to handleSubmit ()

reactjs

redux