Как использовать setFieldValue и передавать значение в качестве реквизита между компонентами

Я пытаюсь использовать формы дизайна муравьев в моем образце регистрационной формы, когда я пытаюсь использовать setFieldsValue, он выдает ошибку: «Невозможно использовать setFieldsValue, если не используется getFieldDecorator». Но я уже использовал 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>
  )
}

reactjs forms antd
person Shibu    schedule 23.04.2018    source источник
comment
зачем использовать const для переменной   -  person    schedule 03.05.2018

Ответы (2)


arrow_upward
5
arrow_downward

fname не определен в getFieldDecorator.

Вам следует сделать это:

handleChange = (e) => {
  const fname = e.target.name;
  const fvalue = e.target.value;
  this.props.form.setFieldsValue({
    [fname]: fvalue
  });
}
person Vicky    schedule 04.05.2018
comment
Спасибо ... Была ли моя ошибка в объявлении fname там, где функция setFields приняла его как строку? - person Shibu; 16.05.2018
comment
@Shibu да, когда вы ссылаетесь на имя переменной внутри setFieldsValue, оно принимает как строку, и это создало вашу проблему - person Sunil Kumar Singh; 31.01.2020

arrow_upward
0
arrow_downward

Для этого вы можете создать свою собственную функцию:

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');

or

setFieldValue(form, ['phones', 'mobile'], '2222222222');
person Rodrigo Brandão    schedule 22.05.2021