KendoReact Form组件设置Input值不显示且value未定义如何解决

• 直接在Field组件上传递value属性不符合KendoReact Form的使用规范：KendoReact Form是受控表单组件，所有字段状态统一由Form组件自身管理，不会读取Field组件上的自定义value作为字段值，因此你传入的value="value1"不会生效，自定义组件拿到的value自然为undefined。
• 封装的InputField1组件没有绑定Form传入的onChange回调，即使初始值正常显示，后续用户输入也无法同步更新表单状态。

如果需要设置字段初始默认值，通过Form组件的initialValues属性配置，同时完善自定义字段组件的事件绑定即可，修改后的完整代码如下：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { Input } from '@progress/kendo-react-inputs';

const InputField1 = (fieldRenderProps) => {
  // 取出Form传入的onChange回调绑定到Input组件
  const { label, value, onChange } = fieldRenderProps;
  return (
    <div>
      <Input label={label} value={value} onChange={onChange} />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Form
        {/* 配置表单初始值，key对应Field的name属性 */}
        initialValues={{
          Field1: "value1"
        }}
        render={(formRenderProps) => (
          <>
            <br />
            <br />
            <div>
              <Field
                name="Field1"
                label="Field1 Label"
                component={InputField1}
              />
            </div>
            <br />
            <br />
          </>
        )}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

如果需要动态修改表单值，可以通过Form提供的formApi调用setFieldValue方法更新指定字段的值。

内容的提问来源于stack exchange，提问作者Phat Baba