更简单的方法是将回退值设为空字符串。也适用type=number。

<input type="number" value={estimatedHours || ''} />

您可以设置值未定义，

如果需要，还可以添加对输入类型的检查

class Input extends React.Component {

    constructor(props) {
        super(props);
        this.state = {value: undefined};

        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (event) => {
        const isnum = /^\d+$/.test(event.target.value);
        if (isnum) {
            return this.setState({
                value: Number(event.target.value),
            });
        }
    };

    render() {
        return (
            <input
                type="number"
                onChange={this.handleChange}
                value={String(this.state.value)}
                placeholder={"Please enter number"}
            />
        );
    }
}

并将字符串转换为数字，反之亦然

这不会因为不受控制的输入而向您抛出错误

我希望我的受控输入在框中没有任何值的情况下进行初始化。

我的问题是我想要一个带有空/未定义初始值的受控数字输入。

我建议使用如下所示的空字符串默认输入元素中的 value props：

<input
   type="number"
   // ...
   value={estimatedHours === undefined ? '' : estimatedHours}
/>

这将使输入为空并防止来自 React 的警告。它也可以方便地与requiredprops一起工作，因此用户必须输入输入。

在 TypeScript 3.7+ 中，可以使用空合并运算符将其缩短为以下内容：

<input
   type="number"
   // ...
   value={estimatedHours ?? ''}
/>

不受控制的输入只是value与 JavaScript无关的输入。所以如果你正在渲染：

<input value={any} />

那是一个受控的输入。

如果你想用一个空值渲染一个不受控制的输入，你可以简单地写

<input type="number" /> or <input type="number" placeholder="" />
or <input type="number" placeholder="please enter a number..." />

接下来，如果您想拉取值，请使用 ref。

state = {
  query: ''
}

handleSubmit = (e) => {
  e.preventDefault()
  this.setState({ query: this.search.value })
}

render() {
  return (
    <form>
      <input 
        type="number" 
        ref={input => this.search = input} 
        placeholder="" 
      />
      <button type="submit" onClick={this.handleSubmit}>Submit</button>
    </form>
  )
}

此外，如果需要，您仍然可以对返回值执行逻辑。IE：

handleSubmit = (e) => {
  e.preventDefault()
  this.setState({ query: this.search.value.toExponential(2) })
   // square whatever the user inputs and store in this.state.query
}