反应：不使用setValue更改受控值的状态？

如何解决反应：不使用setValue更改受控值的状态？

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组件，应该可以以任何通用的方式使用。 / p>

所以我的问题是：即使我听起来很虚伪，有没有办法在不使用setVal的情况下更改输入组件的值？

上面的代码和框中的特定示例。具体问题在DropdownSelector.js的第128行中。预先非常感谢。

解决方法

在代码和框中，您应该：

1. 向您的useEffect依赖项添加labelAndValue，或者更好：

2. 将onSelect从useEffect移至第59行，移至onMouseDown。