Question

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

我的问题是，当数值零通过时，它被认为是一个错误值，并呈现一个空字符串。我希望它在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。

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

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

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

Answer 2

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

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

Material-ui文本字段的零值为零

input.js

2 个答案: