1

我在 React 中有一个输入字段。

<input 
    type = "number"
    value = {this.props.answer || undefined}
    onKeyUp = {(e) => (e.keyCode === 13) ? onAnswer(e.target.value) : false }
/>

这样它的行为就像我需要它的行为一样：

  • 如果没有this.props.answer，则输入中没有初始值。
  • 用户可以输入任何数字。什么都没有发生onChange
  • 一旦用户按下 Enter，状态就会改变（在onAnswer函数中）。此后，输入字段的值保持不变this.props.answer，用户不能再更改该值。

但是当用户按下 Enter 时，我会收到以下警告：

组件正在更改要控制的类型编号的非受控输入。

我读到了不受控制的组件，我试过这个：

<input 
    type = "number"
    defaultValue = {this.props.answer || undefined}
    ref={this.input}
    onKeyUp = {(e) => (e.keyCode === 13) ? onAnswer(e.target.value) : false }
/>

这样我不会收到警告，但在用户按 Enter 后输入字段仍然可编辑。我也尝试同时使用value和defaultValue属性，但我再次收到相同的警告。

我希望输入字段受到某种控制，但我不想更改状态，onChange但仅在用户按下 Enter ( onKeyUp) 时才更改。在此之后，用户应该无法编辑输入。有没有办法实现这种行为？

更新：我不知道我可以readOnly根据状态设置输入的属性。设置状态后将其设置为 false 可以解决我的问题。

4

1 回答 1

0

您可以防止在 keyUp 事件处理程序中编辑输入：

onKeyUp = (e) => {
   // Check if we still accept typing
   if (no_more_typing) return e.preventDefault();
   // Handle enter key
   if (e.keyCode === 13) onAnswer(e.target.value);
}

<input
  onKeyUp={onKeyUp} ...
于 2020-04-22T15:03:39.010 回答