让表单控件的值既来自props也来自用户输入

Question

我已经这样设置了：

<input className="form-control" id="focusedInput" type="text" value={props.myValue />

这当然会警告您缺少onChange。

我真正想做的是允许该字段可由用户编辑（并在编辑后立即更新props.myValue），但是同时，如果props.myValue更改，它将也更新为props.myValue。 （想象一下还有另一个按钮可以更改props.myValue。）

我该怎么做？

Answer 1

这是著名的文章，我建议阅读全文，但解决方案在此部分中： https : //reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state。 html＃preferred-solutions

想法是让此<input>的父控件来控制道具，因此您将onChange设置为父项，然后父项可以接收用户输入并管理您提到的“按钮”，因此此<input>的props是很好的决定。 父级很有可能将用户输入保存为state ，如果单击“按钮”，则可以替换其值。