使用空白值和 type="number" 初始化受控 React 输入答案

【问题标题】：Initializing controlled React input with blank value and type="number"使用空白值和 type="number" 初始化受控 React 输入
【发布时间】：2019-10-07 19:47:37
【问题描述】：

问题：

我有一个使用 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?

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

0 是假的，所以在以下情况：

this.state.objectForSaving.numberToBeSaved|| ''

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

如果您只是想检查numberToBeSaved 是否已定义，那么您可以更稳健地执行此操作：

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

【讨论】：

这是一个完美的解释。我测试了一下，做了一个 isUndefined 辅助方法。这解决了我的问题。谢谢。
如果你碰巧已经在使用 lodash，你可以使用它的 isUndefined 或 isNil 函数，而不是在你自己的代码中复制这些帮助方法。

【解决方案2】：

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

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

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

【讨论】：