Codesandbox：https ://codesandbox.io/s/magical-black-vp1r0?file=/src/dropdown-selector.js
我正在尝试构建一个非常具体的组件，但我不确定它是否可能。请告诉我。
要求：
- SelectBox 必须是受控输入
- DropdownSelector 组件可以以任何可能的方式使用（也就是不要更改 App.js）
- 单击下拉选项中的选项之一时，该值将替换输入字段值
原因
- 我正在使用 react-intl，它仅适用于受控输入（如果值受控，则立即转换）
- 该组件是 monorepo 的一部分，这意味着 UI 组件应该足够通用，可以以任何可能的方式使用
- 该组件的目的是一个下拉选择器，这意味着用户可以输入一个单词，自动完成选项将下拉供用户单击并“完成”他们的搜索
困境是，如果我想控制组件，我必须只使用setVal方法来改变状态/值。例如，val只能通过setVal典型的反应输入组件进行更改，如下所示：
const [val, setVal] = useState();
<input value={val} onChange={e => setVal(e.target.value)} />
但是，为了让下拉选项替换输入组件的值，它必须更改值状态。但是受控组件只有一种更改状态的方法，setVal在这种情况下，我无法更改 onChange 使用 setVal 的方式，因为这是一个应该能够以任何通用方式使用的 UI 组件。
所以我的问题是：即使我听起来很虚伪，有没有办法在不使用的情况下改变输入组件的值setVal？
上面代码框中的具体示例。具体问题在 DropdownSelector.js 的第 128 行。非常感谢您提前。