Question

问题：

我使用Material-UI TextField进行了受控输入。我想使用纯数字，并为移动键盘支持type =“ number”，但是当默认使用空字符串并在onChange中使用parseInt时，它将不允许为0（零）。所有其他数字均正确显示。

甚至可以在绑定到TextField的基础对象中正确设置0。

在其他输入中，我具有默认值，为空字符串（已大大简化），如下所示：

<TextField
    name={"inputToBeSaved"}
    value={this.state.objectForSaving.inputToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

具有相应的handleChange：

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

上面的示例符合预期，但在尝试使用数字时不起作用：

<TextField
    type="number"
    name={"numberToBeSaved"}
    value={this.state.objectForSaving.numberToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.type === 'number' ? parseInt(target.value) : target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

我知道默认为0或使其不受控制可以解决该问题，但是有时候我确实从服务器那里获取了值，所以我想重用这些组件。

我试图看一下这篇文章，但没有找到任何好的方法来控制它：Initializing React number input control with blank value?

Answer 1

0为假，因此在以下情况下：

this.state.objectForSaving.numberToBeSaved|| ''

如果numberToBeSaved为0，则表达式将计算为空字符串。

如果您只是想检查是否定义了numberToBeSaved，则可以使用以下方法更可靠地完成此操作：

this.state.objectForSaving.numberToBeSaved === undefined ? '' : this.state.objectForSaving.numberToBeSaved

Answer 2

设置TextField属性时，您可以将值转换为字符串。

const {
  objectForSaving: {
    inputToBeSaved = '',
  },
} = this.state

<TextField
  name={"inputToBeSaved"}
  value={String(inputToBeSaved)}
  onChange={this.handleChange}
  variant="outlined"
/>

使用空白值和type =“ number”

2 个答案: