Material-ui 零的文本字段空值

Question

我有一个用 Formik 处理的 Material-Ui TextField。输入值（字符串）在输入更改时转换为数字。

我的问题是，当值编号为零时，它被视为假值并呈现空字符串。我希望它 'number zero' 显示在 TextField 中。

如果我删除 TextField 值条件 (value || ' ')，它会在下面给我一条警告消息。

Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

我该如何解决它？

input.js

const Input = ({
  classes,
  icon,
  styleName,
  field: { name, value, onBlur },
  form: { errors, touched, setFieldValue },
  ...props
}) => {
  const errorMessage = getIn(errors, name);
  const isTouched = getIn(touched, name);

  const change = (e, name, shouldValidate) => {
    e.persist();
    const inputValue = e.target.value;
    let value;

      if (inputValue !== '') {
        value = isNaN(inputValue) ? inputValue : parseInt(inputValue, 10);
      } else {
        value = null;
      }

    return setFieldValue(name, value, shouldValidate);
  };

  return (
    <TextField
      name={name}
      value={value || ''}
      onChange={e => change(e, name, true)}
      onBlur={onBlur}
      {...props}
      className={classes[styleName]}
      helperText={isTouched && errorMessage}
      error={isTouched && Boolean(errorMessage)}
      InputProps={{
        startAdornment: (
          <InputAdornment position="start">
            <Icon
              name={icon}
              width="30"
              height="30"
              viewBox="0 0 30 30"
              fill="none"
            />
          </InputAdornment>
        ),
      }}
    />
  );
};

Answer 1

我在我们的一些项目中遇到过这样的情况。

这不是特定于 Material-UI，而是特定于 react。

要解决此问题，只需将初始值设置为空字符串 ''。

到目前为止，我们可以将该值设置为空字符串，因为当它为空时，它是输入类型 number 的默认值 event.target.value。

参见：https://codesandbox.io/s/affectionate-stonebraker-cgct3

Answer 2

建议的解决方案对我不起作用。数字 0 是假的。所以它呈现一个空字符串。我用这种方法解决了它。

const input = value === 0 || value ? value : '';
  return (
    <TextField
      name={name}
      value={input}
      ...
    />
  );

Material-ui 零的文本字段空值

Material-ui Textfield null value for zero

javascript

material-ui

formik

input.js