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

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

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

我希望输入字段是受控制的,但我不想改变输入字段的状态。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} ...

给TA打赏
共{{data.count}}人
人已打赏
解决方案

在上传到Wordpress时,给所有图片添加 "图片-"后缀。

2022-4-20 18:08:47

解决方案

为什么gganimate中的transition_layer会额外增加一层NA?能否将其删除?

2022-4-20 18:08:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索