我想在React中使用介于受控和不受控组件之间的东西

Posted 2021-03-19

我在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 }
/>

这样我就不会收到警告，但用户按回车键后，输入字段仍然可以编辑。我还尝试了使用 value 和 defaultValue 属性，但我又得到同样的警告。

我希望输入字段是受控制的，但我不想改变输入字段的状态。onChange 但只有当用户按下Enter键时才会出现 (onKeyUp). 在这之后，用户应该无法编辑输入。有没有办法实现这种行为？

UPDATE: 我不知道我可以在输入框中设置 readOnly 根据状态来设置输入的属性。在设置状态后将其设置为false就解决了我的问题。

答案

你可以在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} ...