讓表單控件的值既來自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 ，如果單擊“按鈕”，則可以替換其值。