时间戳

首页 > 解决方案 > 我想从输入字段 react-redux 获取数据

reactjs - 我想从输入字段 react-redux 获取数据

问题描述

这只是一个让我感到困惑的简单任务我想获取输入字段的数据

我想把它拿到控制台

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>
       )
   }
}

标签： reactjsredux

解决方案

如果您只想根据您的问题将其记录在控制台上，请将处理函数传递给 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>
    )
  } 
}

但是如果你打算使用 redux-form，你必须将 Input 组件更改为 Field：

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);
  }

推荐阅读