如何使用IC Snacks FormComponent访问输入的propTypes和另一个反应组件的输入值

时间:2019-04-16 09:23:00

标签: reactjs react-proptypes

我正在尝试从自定义表单组件中检索值。 我正在使用可以在此处找到并安装的instaCart表单组件。 => https://instacart.github.io/Snacks/#forms

TextAreaForm.js(自定义表单组件)

import React, { Component } from "react";
import { FormComponent } from 'ic-snacks';
import PropTypes from 'prop-types';

class TextAreaForm extends Component {

static propTypes = {
    name    : PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    required: PropTypes.bool,
  }

  render() {
    return (
      <div>
        <input
            name={this.props.name}
            type="text"
            disabled={this.props.disabled}
            required={this.props.required}
        />
      </div>
    )
  }
}
export default FormComponent(TextAreaForm)
console.log(TextAreaForm.propTypes)

Sms.js(主要组件)

import { Button, Form, TextField, FormComponent } from 'ic-snacks';
import PropTypes from 'prop-types';
import TextAreaForm from "../components/TextAreaForm";
import React, { Component } from "react";

class Sms extends Component {
  render() {
    handleFormSubmit = (model) => {
        console.log(model)
    }
    return (
        <Form
            onSubmit={this.handleFormSubmit}
            serverErrors={{}}
            formProps={{}}
        >
                <TextField
                    style={{marginRight: '5px'}}
                    name="Message"
                    type="text"
                    floatingLabelText="Message"
                    fullWidth
                    required
                />
                <TextAreaForm
                    name="Message2"
                />
              <Button type="submit" size="large"  >
                SEND TEXT
              </Button>
        </Form>      
    )
  }
}
Sms = FormComponent(Sms);
export default Sms;

提交表格后,我得到了。

控制台:

“使用FormComponent无法检索FormComponent值”

“ {{消息:” qwerty“,消息2:未定义}”

0 个答案:

没有答案