2

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

到目前为止，我在我的反应应用程序中使用 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.

哪个不工作。这是文档链接，我一直在关注。

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

4

1 回答 1

1

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

<Input
  maxLength={10}
  className="mk_input_secondary"
  onChange={handleChange('fullName')}
/>
于 2019-11-19T05:00:10.253 回答