问题描述
CodesandBox:https://codesandbox.io/s/magical-black-vp1r0?file=/src/dropdown-selector.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行中。预先非常感谢。
解决方法
在代码和框中,您应该:
-
向您的useEffect依赖项添加
labelAndValue
,或者更好: -
将
onSelect
从useEffect
移至第59行,移至onMouseDown
。