Question

我的蚂蚁设计Form Input为FormItem。我只是想大写和修剪输入中输入的所有文本，所以我希望它作为受控组件。由于value内包含的组件不会直接使用getFieldDecorator字段操作值，因此我将警告建议的组件传递的setFieldsValue道具附加onChange事件。但是，在为每个setFieldsValue事件调用onChange时，更改的值似乎不会反映输入。

有人可以建议正确的方法吗？谢谢。我附上了我的代码的最小版本，剥离了不必要的功能

class AddProduct extends Component {
  handleCodeChange = e => {
    const finalCode = e.target.value.toUpperCase().trim()
    console.log(finalCode)
    this.props.form.setFieldsValue({ code: finalCode })
  }

  render() {
    const {
      getFieldDecorator,
      getFieldsError,
      getFieldError,
      isFieldTouched,
    } = this.props.form
    const FormItem = Form.Item
    const codeError = isFieldTouched('code') && getFieldError('code')

    return (
      <div>

        <Form onSubmit={this.handleSubmit}>
          <FormItem
            label="Code"
            validateStatus={codeError ? 'error' : ''}
            help={codeError || ''}
          >
            {getFieldDecorator('code', {
              rules: [{ required: true, message: 'Please input product code!' }],
            })(
              <Input onChange={this.handleCodeChange} />
              )}
          </FormItem>
        </Form>
      </div>
    )
  }
}

export default Form.create()(AddProduct)

Answer 1

尝试setTimeout
setTimeout(() => { this.props.form.setFieldsValue({ code: finalCode }); }, 40)

Answer 2

Ant Design的Form组件和getFieldDecorator似乎并不想受到控制。

他们使用onFieldsChange和mapPropsToFields的例子可能是最接近被控制的东西。

https://ant.design/components/form/#components-form-demo-global-state

import { Form, Input } from 'antd';

const FormItem = Form.Item;

const CustomizedForm = Form.create({
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
      }),
    };
  },
  onValuesChange(_, values) {
    console.log(values);
  },
})((props) => {
  const { getFieldDecorator } = props.form;
  return (
    <Form layout="inline">
      <FormItem label="Username">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: 'Username is required!' }],
        })(<Input />)}
      </FormItem>
    </Form>
  );
});

class Demo extends React.Component {
  state = {
    fields: {
      username: {
        value: 'benjycui',
      },
    },
  };

  handleFormChange = (changedFields) => {
    this.setState(({ fields }) => ({
      fields: { ...fields, ...changedFields },
    }));
  }

  render() {
    const fields = this.state.fields;
    return (
      <div>
        <CustomizedForm {...fields} onChange={this.handleFormChange} />
        <pre className="language-bash">
          {JSON.stringify(fields, null, 2)}
        </pre>
      </div>
    );
  }
}

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

Answer 3

我遇到了同样的问题，这是我的解决方案：

const NodeEditor = ({ data, onChange }) => {
  const [form] = Form.useForm();

  // Update data reactively
  useEffect(() => {
    form.setFieldsValue({
      ...data,
      label: data.label.toUpperCase().trim()
    });
  }, [data, form]);

  return (
    <Form form={form} layout="vertical" initialValues={data}>
      <Form.Item name="label" label="Подпись">
        <Input placeholder="Подпись для элемента" />
      </Form.Item>
    </Form>
  );
};

export default NodeEditor;

快乐编码！

Answer 4

以下解决方案允许您将输入字段用作嵌套在Ant Design库中存在的表单下的受控组件：

>>> t1 = b'test'
>>> t2 = b'\x74\x65\x73\x74'
>>> t1 == t2
True
>>> print(t1, t2)
b'test' b'test'

如何将输入字段用作嵌套在ant设计库中的表单下的受控组件？

4 个答案: