Question

我试图限制用户输入，因为在其中输入了一些值表单项输入字段。我希望用户仅添加有限的字符，然后之后，用户将无法键入任何字符和其他字符替换为''。

到目前为止，我在我的react应用程序中使用Ant Design Forms。我不是手动处理表单数据，因为Im使用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);

预期的行为是，由于我正在设置setFieldsValue并对输入进行切片，因此用户不能在字段中输入10个以上的字符，但是用户仍然可以输入输入。不知何故，我的理解是因为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')}
/>

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

1 个答案: