Javascript 我想在React中的受控组件和非受控组件之间找到一些东西

我在React中有一个输入字段

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

这样，我不会得到警告，但在用户按下Enter键后，输入字段仍保持可编辑状态。我还尝试使用

value

和

defaultValue

属性，但还是得到了相同的警告

我希望对输入字段进行某种程度的控制，但我不希望更改

onChange

上的状态，而是仅当用户按Enter（

onKeyUp

）时才更改。在此之后，用户应该无法编辑输入。有没有办法实现这种行为

---

更新：我不知道我可以根据状态设置输入的

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} ...

onKeyUp=（e）=>{
//检查我们是否仍然接受打字
if（不再键入）返回e.preventDefault（）；
//手柄输入键
如果（e.keyCode===13）onAnswer（e.target.value）；
}
您可以防止在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} ...

onKeyUp=（e）=>{
//检查我们是否仍然接受打字
if（不再键入）返回e.preventDefault（）；
//手柄输入键
如果（e.keyCode===13）onAnswer（e.target.value）；
}
如果您不希望用户能够编辑该值，那么您是否应该切换
禁用
或
只读
状态？不清楚您试图做什么。你能退一步解释一下吗？您想让表单在提交后成为只读吗？@rickdenhaan我不知道
只读
。这正好解决了我的问题。谢谢@Davintroon它不是一个真正的表单，只是一个输入字段，但是的，我需要在用户按下Enter键并且状态改变后使其只读。但是设置
readonly
属性解决了我的问题。如果您不希望用户能够编辑该值，那么您不应该切换
disabled
或
readonly
状态吗？不清楚您试图做什么。你能退一步解释一下吗？您想让表单在提交后成为只读吗？@rickdenhaan我不知道
只读
。这正好解决了我的问题。谢谢@Davintroon它不是一个真正的表单，只是一个输入字段，但是的，我需要在用户按下Enter键并且状态改变后使其只读。但是设置
readonly
属性解决了我的问题。如果我遗漏了什么，请原谅，但这对我不起作用。最初我可以输入一些数字，但在按下enter键之前什么也不会发生。然后状态被设置->在这一刻之前是正常的，但是在我仍然可以编辑输入值之后。代码进入第一个
if
分支，但似乎
e.preventDefault（）
不阻止我编辑输入字段的值。更新：如果我在输入上使用
值
而不是
默认值
，则您的解决方案有效，但它会导致相同的警告：
一个组件正在更改要控制的类型编号的非受控输入。
您是否可以尝试使用
onKeyPress
而不是
onKeyUp
，这就是我用来过滤掉一些我不想要的字符的方法，关于警告，当你做
value=undefined
，这意味着你的输入是不受控制的（基本上输入是自我管理它的值）。但是，当您执行
value={this.props.answer}
时，您的输入就会受到控制，因为您正在施加一个值。你能试试
value={this.props.answer | |''''}
onKeyPress
不起作用。没有
e.keyCode
。如果我使用
value={this.props.answer | |''''}
这是警告：失败的prop类型：您在没有
onChange
处理程序的表单字段中提供了
value
prop。这将呈现只读字段。如果字段应该是可变的，请使用
defaultValue
。否则，请设置
onChange
或
readOnly
。如果我遗漏了什么，请原谅，但这对我不起作用。最初我可以输入一些数字，但在按下enter键之前什么也不会发生。然后状态被设置->在这一刻之前是正常的，但是在我仍然可以编辑输入值之后。代码进入第一个
if
分支，但似乎
e.preventDefault（）
不阻止我编辑输入字段的值。更新：如果我在输入上使用
值
而不是
默认值
，则您的解决方案有效，但它会导致相同的警告：
一个组件正在更改要控制的类型编号的非受控输入。
您是否可以尝试使用
onKeyPress
而不是
onKeyUp
，这就是我用来过滤掉一些我不想要的字符的方法，关于警告，当你做
value=undefined
，这意味着你的输入是不受控制的（基本上输入是自我管理它的值）。但是，当您执行
value={this.props.answer}
时，您的输入就会受到控制，因为您正在施加一个值。你能试试
value={this.props.answer | |''''}
onKeyPress
不起作用。没有
e.keyCode
。如果我使用
value={this.props.answer | |''''}
这是警告：失败的prop类型：您在没有
onChange
处理程序的表单字段中提供了
value
prop。这将呈现只读字段。如果字段应该是可变的，请使用
defaultValue
。否则，请设置
onChange
或
readOnly
。