In antd Form, use custom component submit to get values that cannot be customized.

parent component Form form

submit= (e) => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        consle.log(values)
      }
    });
  }
<Form onSubmit={this.submit}>
    <FormItem label={""}>
        {getFieldDecorator("aaaa", {rules: [{}],})(
            <Currency valueChange={this.valueChange}/>
        )}
    </FormItem>
</Form>

customize Currency components

import React from "react"
import {Select} from "antd";

const Option = Select.Option

class Currency extends React.Component {

  render() {
    return (
      <Select>
        <Option value="CNY">RMB</Option>
        <Option value="BTC">BTC</Option>
        <Option value="USDT">USDT</Option>
      </Select>    
      );
  }
}

export default Currency;

is there any other good way to pass the value of the custom component back to the parent component

Mar.04,2021

has been solved ~
you can get

by calling this.props.onChange in the Currency component.
import React from 'react'
import {Select} from 'antd';

const Option = Select.Option

class Currency extends React.Component {
  selectCurrency = (e) => {
      const {onChange} = this.props
      onChange(e)
  }
  render() {
    return (
      <Select onSelect={this.selectCurrency}>
        <Option value="CNY">RMB</Option>
        <Option value="BTC">BTC</Option>
        <Option value="USDT">USDT</Option>
      </Select>    
      );
  }
}

export default Currency;

you need to use Form.create () (YourComponent) to wrap your components.


<FormItem label={""}>
        {getFieldDecorator('aaaa', {rules: [{}],})(
            <Currency value={this.valueChange}/>
        )}
    </FormItem>
Menu