在ant Design Form中使用setFieldsValue时无法限制或更改用户输入

Question

我试图限制用户输入，因为人们在 表单项输入字段。我希望用户只添加有限的字符和 之后，用户无法输入任何字符和其他 字符被替换为''。

到目前为止，我在我的反应应用程序中使用 Ant Design Forms。我没有手动处理表单数据，因为我使用 Form.create 和 getFieldsDecorator，它们将按照文档中的说明自动收集和验证表单数据。

文档说使用setFieldsValue 以编程方式设置控件的值。

就我而言，它似乎不起作用。为了简单起见，我在这里只提到代码的重要部分。

    const Modal = ({
      visible,
      modalType,
      closeModal,
      companiesList,
      cohortsList,
      employeeDetail,
      inProgressAction,
      success,
      ...props
    }) => {
      const [editForm, setEditForm] = useState(INITIAL_STATE);

      const handleChange = name => event => {
        const value = event.target.value.slice(0,10);
        setEditForm(prevEditForm => ({
          ...prevEditForm,
          [name]: value,
        }));

        props.form.setFieldsValue({ [name]: value }); // This doesn't limit the value to 10 and the user is still able to enter more than 10 charavters
      };

      return (
        <Modal
          title="Create New Employee"
          visible={visible}
          onOk={handleOk}
          onCancel={closeModal}
          destroyOnClose
          centered
          footer={[
            <Button
              key="cancel"
              onClick={closeModal}
            >
              Cancel
            </Button>,
            <Button
              key="submit"
              type="primary"
              onClick={handleOk}
              disabled={!isSubmitEnabled()}
              loading={inProgressAction === 'add'}
            >
              Add Employee
            </Button>,
          ]}
        >
          <Spin
            spinning={props.loadingCompanies || props.loadingCohorts}
            className="mk_dotted_spinner"
            size="small"
          >
            <Form {...formItemLayout}>
              <Form.Item label="Name">
                {props.form.getFieldDecorator('fullName', {
                  initialValue: editForm.fullName,
                  rules: [
                    {
                      required: true,
                      message: 'Please input employee name!',
                    },
                  ],
                })(
                  <Input
                    className="mk_input_secondary"
                    onChange={handleChange('fullName')}
                  />
                )}
              </Form.Item>
            </Form>
          </Spin>
        </Modal>
      );
    };

    export default Form.create({ name: 'employeeForm' })(Modal);

预期的行为是用户不能在字段中输入超过 10 个字符，因为我正在设置 setFieldsValue 并对输入进行切片，但用户仍然能够输入输入。不知何故，我的理解是因为getFieldsDecorator 正在控制我无法限制输入的表单。有一些解决方法吗？我一直在查看有关 setFieldsValue 的文档，但除了这一行之外找不到任何东西

Use setFieldsValue to set other control's value programmaticly.

哪个不起作用。这是我一直关注的文档link。

任何帮助将不胜感激。谢谢。

Answer 1

您可以简单地将 maxLength={10} 放入输入标签中

<Input
  maxLength={10}
  className="mk_input_secondary"
  onChange={handleChange('fullName')}
/>