Javascript 如何使用输入字段作为嵌套在ant design库中表单下的受控组件？

我有一个蚂蚁设计的

表单

，其中

输入

作为

表单

。我只是想大写和修剪输入中输入的所有文本，所以我希望它作为一个受控组件。由于对于封装在

getFieldDecorator

中的组件，它不能直接使用

value

字段操纵值，因此我根据警告的建议，使用组件传递的

setFieldsValue

属性附加了onChange事件。但是在为每个

onChange

事件调用

setFieldsValue

时，更改的值似乎不会反映在输入上

有人能建议正确的方法吗？谢谢我附加了我的代码的最低版本，去掉了不必要的函数

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)

class AddProduct扩展组件{
handleCodeChange=e=>{
const finalCode=e.target.value.toUpperCase（）.trim（）
console.log（最终代码）
this.props.form.setFieldsValue（{code:finalCode}）
}
render（）{
常数{
getFieldDecorator，
getFieldsError，
getFieldError，
我很感动，
}=this.props.form
const FormItem=表单项
const codererror=isfieldtoucted（'code'）&&getFieldError（'code'））
返回(
{getFieldDecorator（'代码'{
规则：[{required:true，消息：'请输入产品代码！'}]，
})(
)}
)
}
}
导出默认表单。创建（）（AddProduct）

尝试设置超时

setTimeout（（）=>{
this.props.form.setFieldsValue（{code:finalCode}）；
}，40）

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

{
    getFieldDecorator("code", {
        getValueFromEvent: e => e.target.value.toUpperCase().trim(),
        rules: [{ required: true, message: "Please input product code!" }]
    })(<Input />);
}

{
getFieldDecorator（“代码”{
getValueFromEvent:e=>e.target.value.toUpperCase（）.trim（），
规则：[{必需：true，消息：“请输入产品代码！”}]
})();
}

Ant Design的

表单

组件和

getFieldDecorator

似乎不打算被控制

他们使用

onfielschange

和

mapPropsToFields

的例子可能是最接近被控制的

import{Form，Input}来自'antd'；
const FormItem=表单项；
const CustomizedForm=Form.create({
onfielschange（道具、变更场）{
道具更换（更换场地）；
},
mapPropsToFields（道具）{
返回{
用户名：Form.createFormField({
…props.username，
值：props.username.value，
}),
};
},
onValuesChange（u，值）{
console.log（值）；
},
})（（道具）=>{
const{getFieldDecorator}=props.form；
返回(
{getFieldDecorator（'用户名'{
规则：[{required:true，消息：'Username is required！']，
})()}
);
});
类Demo扩展了React.Component{
状态={
字段：{
用户名：{
值：“benjycui”，
},
},
};
handleFormChange=（changedFields）=>{
this.setState（（{fields}）=>({
字段：{…字段，…更改字段}，
}));
}
render（）{
常量字段=this.state.fields；
返回(
{JSON.stringify（字段，null，2）}
);
}
}
render（，mountNode）；

我面临同样的问题，这是我的解决方案：

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;

const NodeEditor=（{data，onChange}）=>{
const[form]=form.useForm（）；
//反应式更新数据
useffect（（）=>{
form.setFieldsValue({
数据
label:data.label.toUpperCase（）.trim（）
});
}，[数据、表格]；
返回(
);
};
导出默认节点编辑器；

---

快乐编码

嘿@Ayush你能解决这个问题吗？我有一个类似的问题。我不鼓励只使用代码的答案，因为在大多数情况下，它们不能提供足够的上下文来理解和评估建议的解决方案。我建议您编辑您的答案，并用简单的语言提供描述。您能否指定我们如何使用onSubmit={this.handleSubmit}和此方法。

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;