时间戳

首页 > 解决方案 > 我想要 React 中受控组件和不受控组件之间的东西

javascript - 我想要 React 中受控组件和不受控组件之间的东西

问题描述

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

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

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

但是当用户按下 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 可以解决我的问题。

标签： javascriptreactjsinputonchangecontrolled-component

解决方案

您可以防止在 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} ...

推荐阅读