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

您可以这样做

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

Answer 2

如果您只是想根据自己的问题将其登录到控制台，请将处理功能传递给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);
  }

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

2 个答案: