用空白值初始化反应号输入控件？

Question

我希望我的受控输入在框中没有任何值的情况下进行初始化。输入是一个数字，因此我不会传递空值''。使用defaultProps，我将输入初始化为null。

在输入中输入时，控制台将报告以下消息：

<MyInput>正在更改要控制的类型编号的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。

为了防止这种情况，我通常使用一个空字符串进行初始化，以防止发生这种“切换”。但是有一个数字（我不想显示0，我不想显示任何东西）我不确定该怎么做。

static defaultProps = {
    estimatedHours: null,
    estimatedMinutes: null,
  }

默认值^^

<input
   type="number"
   onChange={(e) => this.handleChange('Hours', e.target.value)}
   onKeyDown={this.handleKeyDown}
   onPaste={this.handlePaste}
   value={estimatedHours}
   placeholder={hoursText}
   className="slds-input th-trailmix-textbox th-time-component__input"
/>

Answer 1

更简单的方法是将后备值设置为空字符串。type=number也适用于。

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

Answer 2

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

<input value={any} />

这是一个受控输入。

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

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

接下来，如果您想提取该值，请使用引用。

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
}