Я хочу передать свои входные значения из формы в handleSubmit ()

Question

Я хочу передать свои входные значения из формы в handleSubmit (), в настоящее время я передаю e.target.value, и получение ошибки не может иметь свойство 'value' 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

Итак, @Will предложил мне добавить значения в свой handleSubmit (), это решило мою проблему, спасибо вам всем. Ниже приведен фрагмент кода, в котором я внес изменения:

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

Answer 3

Вам нужно привязать свой метод для получения значения от дочернего компонента

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

Теперь вы не должны получить неопределенную ошибку