ant-design自定義表單組件回傳值的問題

getFieldDecorator這個方法會向組件注入value參數，onChange方法。子組件通過value參數來初始化值，通過onChange方法通知父組件更新。 如果想傳入其他參數，也可以像placeholder那樣顯示的傳入。

官方定義：

自定義或第三方的表單控件，也可以與 Form 組件一起使用。只要該組件遵循以下的約定：

• 提供受控屬性 value 或其它與 valuePropName 的值同名的屬性。

• 提供 onChange 事件或 trigger 的值同名的事件。

• 支持 ref：

  • [email protected] 之前只有 Class 組件支持。

  • [email protected] 及之後可以通過 forwardRef 添加 ref 支持。（示例）

官方的案例：

import { Form, Input, Select, Button } from 'antd';

const { Option } = Select;

class PriceInput extends React.Component {
  static getDerivedStateFromProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {}),
      };
    }
    return null;
  }

  constructor(props) {
    super(props);

    const value = props.value || {};
    this.state = {
      number: value.number || 0,
      currency: value.currency || 'rmb',
    };
  }

  handleNumberChange = e => {
    const number = parseInt(e.target.value || 0, 10);
    if (isNaN(number)) {
      return;
    }
    if (!('value' in this.props)) {
      this.setState({ number });
    }
    this.triggerChange({ number });
  };

  handleCurrencyChange = currency => {
    if (!('value' in this.props)) {
      this.setState({ currency });
    }
    this.triggerChange({ currency });
  };

  triggerChange = changedValue => {
    // Should provide an event to pass value to Form.
    const { onChange } = this.props;
    if (onChange) {
      onChange({
        ...this.state,
        ...changedValue,
      });
    }
  };

  render() {
    const { size } = this.props;
    const { currency, number } = this.state;
    return (
      <span>
        <Input
          type="text"
          size={size}
          value={number}
          onChange={this.handleNumberChange}
          style={{ width: '65%', marginRight: '3%' }}
        />
        <Select
          value={currency}
          size={size}
          style={{ width: '32%' }}
          onChange={this.handleCurrencyChange}
        >
          <Option value="rmb">RMB</Option>
          <Option value="dollar">Dollar</Option>
        </Select>
      </span>
    );
  }
}

class Demo extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  checkPrice = (rule, value, callback) => {
    if (value.number > 0) {
      callback();
      return;
    }
    callback('Price must greater than zero!');
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <Form.Item label="Price">
          {getFieldDecorator('price', {
            initialValue: { number: 0, currency: 'rmb' },
            rules: [{ validator: this.checkPrice }],
          })(<PriceInput />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedDemo = Form.create({ name: 'customized_form_controls' })(Demo);

ReactDOM.render(<WrappedDemo />, mountNode);

自定義校驗：

<FormItem label="負責人">
                        {getFieldDecorator('dataBusiness', {
                            initialValue: undefined,
                            rules: [
                                {
                                    required: true,
                                    type: 'array',
                                    validator: (rule: any, value1: TSType, callback: any) => {
                                        if (value1) {
                                            if (value1.length == 0) {
                                                callback('請添加至少一個負責人！');
                                            } else {
                                                callback()
                                                return
                                            }
                                        } else {
                                            callback('請添加至少一個負責人！');
                                        }
                                    },

                                }],
                        })(<AddOwner placeholder="請添加至少一個負責人！" key='businessOwner'></AddOwner>)}
                    </FormItem>

參考文章：

https://www.jianshu.com/p/ccafabfd8589

https://www.cnblogs.com/tian874540961/p/10975409.html