如何使用 setFieldValue 并将值作为 props 在组件之间传递

Question

我试图在我的示例注册表中使用 ant design 表单，当我尝试使用 setFieldsValue 时它抛出错误 "Cannot use setFieldsValue unless getFieldDecorator is used"。但是我已经在我的 code.Here 中使用了 getFieldDecorator 是我的代码示例。

handleChange = (e) => {
  const fname = e.target.name;
  const fvalue = e.target.value;
  this.props.setFieldsValue({
    fname: fvalue
  });
}
render(){
  const { getFieldDecorator } = this.props.form
  return (
    <Row gutter={4}>
      <Col className="reg-personal-details-grid-column" span={24}>
        <FormItem {...formItemLayout} label="First Name">
          {getFieldDecorator("firstName", {
            rules: [
              {
                required: true
              }
            ]
          })(
            <Input
              placeholder="First Name"
              required
              name="firstName"
              onChange={this.handleChange}
            />
            )}
        </FormItem>
      </Col>
    </Row>
  )
}

Answer 1

fname 未在 getFieldDecorator 中定义。

你应该这样做：

handleChange = (e) => {
  const fname = e.target.name;
  const fvalue = e.target.value;
  this.props.form.setFieldsValue({
    [fname]: fvalue
  });
}

Answer 2

您可以创建自己的函数来执行此操作：

export const setFieldValue = (
    form: FormInstance,
    name: NamePath,
    value: string
): void => {
    if (form && form.getFieldValue(name)) {
        const fixname: string[] = [];
        if (typeof name == 'object') {
            name.forEach((node: string) => {
                fixname.push(node);
            });
        } else {
            fixname.push(String(name));
        }
        let fieldsValue: unknown;
        fixname.reverse().forEach((node: string) => {
            fieldsValue = {
                [String(node)]: fieldsValue != undefined ? fieldsValue : value,
            };
        });
        form.setFieldsValue(fieldsValue);
    }
};

你可以这样使用

setFieldValue(form, 'phone', '1111111111');

或

setFieldValue(form, ['phones', 'mobile'], '2222222222');

如何使用 setFieldValue 并将值作为 props 在组件之间传递

How to use setFieldValue and pass the value as props between components

forms

reactjs

antd