Я хочу получить данные из поля ввода response-redux

Question

это просто простая задача, которая запутывает меня, я хочу получить данные поля ввода

Я хочу загрузить его на консоль

const MessageForm = ({ handleSubmit, onSubmit }) => (
 <section className="form-container register-model-form">
   <form className="message-form" onSubmit={handleSubmit(onSubmit)}>

     <Input
       label="Write a message..."
       name="message"
       type="text"
     />
   </form>
 </section>
);

MessageForm.propTypes = {
 handleSubmit: PropTypes.func,
 onSubmit: PropTypes.func
};

MessageForm.defaultProps = {
 handleSubmit: noop,
 onSubmit: noop
};

export default reduxForm({
 form: "MessageForm"
})(MessageForm);

и вот мое сообщение .jsx

export default class Messages extends React.PureComponent {
   render() {
       return (
           <section className="page-notifications"> 
               <SubMenu/>
               <MessageForm/>
           </section>
       )
   }
}

Answer 1

Если вы просто хотите зарегистрировать его на консоли в соответствии с вашим вопросом, передайте функцию обработки реквизитам onSubmit следующим образом:

<Input
  label="Write a message..."
  name="message"
  type="text"
  onChange={onSubmit}
/>

А в родительском компоненте:

class Messages extends React.PureComponent {

  handleSubmit = (e) => {
    console.log(e.target.value);
  }

  render() {
    return (
      <section className="page-notifications"> 
        <SubMenu/>
        <MessageForm onSubmit={this.handleSubmit}/>
      </section>
    )
  } 
}

Но если вы хотите использовать избыточную форму, вы должны изменить компонент ввода на Поле:

import { Field, reduxForm } from 'redux-form'

const MessageForm = ({ handleSubmit, onSubmit }) => (
  <section className="form-container register-model-form">
    <form className="message-form" onSubmit={handleSubmit(onSubmit)}>

      <Field
        name="message"
        component="input"
        type="text"
      />
    </form>
  </section>
);

И изменить функцию handleSubmit на:

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

Answer 2

Вы можете сделать это,

<Input label="Write a message..."
    name="message"
    type="text"
    onChange={handleChange}
    value={inputValue}
/>

Вам необходимо передать handleChange и inputValue вашему MessageForm компоненту.

В родительском компоненте сделать это,

export default class Messages extends React.PureComponent {
    handleChange = (e) =>{
       console.log(e.target.value);
    }
     render() {
         return (
             <section className="page-notifications"> 
                 <SubMenu/>
                 <MessageForm handleChange={this.handleChange}/>
             </section>
         )
     } }