如何在 React JS 中获取 material UI 输入字段的长度？

Question

我试图在 material 输入文本长度超过 0 时启用按钮。

这是一个 material 输入字段组件。

const MaterialInput = ({
    name,
    id = name,
    select,
    options = [],
    type,
    label,
    shrink,
    formik,
    disabled,
    handleClick,
}) => {
    return (
        <TextField
            type={type}
            name={name}
            label={label}
            select={select}
            autoComplete='off'
            variant='outlined'
            disabled={disabled}
            className='material-input'
            value={get(formik.values, name, '')}
            onBlur={formik.handleBlur}
            onChange={formik.handleChange}
            helperText={get(formik.touched, name) && get(formik.errors, name)}
            error={get(formik.touched, name) && Boolean(get(formik.errors, name))}
            InputLabelProps={{ shrink }}
        >
            {options.map((item) => (
                <MenuItem
                    onClick={handleClick}
                    className='text-capitalize'
                    value={item.value}
                    key={item.value}
                    disabled={item.disabled || false}
                >
                    {item.label}
                </MenuItem>
            ))}
        </TextField>
    );
};

这就是我在其他组件中使用它的方式。

aComponent.js

                <MaterialInput name={inputName} label={label} formik={typeofForm} />

当文本字段的长度大于 0 时如何启用按钮。

Answer 1

你必须在 textField onchange 上检查你的验证，在这种情况下，你使用 formik 作为你的表单，Formik 主要组件有一个回调函数 validate，你可以使用这个函数处理您的验证，

例子

<Formik
 validate={(values) => { // here check your validations and you have access to the values }}
 validateOnChange
 validateOnBlur
/>

Answer 2

还有很多其他方法可以实现。

假设您 material 输入名称是 mobileNumber 并且 formik 在 component.js 中提交逻辑，您可以在 aComponent.js

中编写以下代码片段

useEffect(() => {
        if (formik.values.mobileNumber.length === 0) {
            // do your disable logic here
        } else {
             // do your logic
        }
    }, [formik.values.mobileNumber]);

Answer 3

您可以使用传递给 TextField 中的 value 属性的内容并获取其长度

const getInputLength = (formik, name) => {
    const value = get(formik.values, name, '');
    return value.length;
}

如何在 React JS 中获取 material UI 输入字段的长度？

How to get the length of material UI input filed in React JS?

validation

input

reactjs

formik