Javascript 反应：在不使用setValue的情况下更改受控值的状态？

代码沙盒：

我正在尝试构建一个非常具体的组件，我不确定它是否可能。请让我知道

要求：

• SelectBox必须是受控输入
• DropdownSelector组件可以以任何可能的方式使用（也就是不要更改App.js）
• 单击下拉选项中的一个选项时，该值将替换inputfield值

理由

• 我使用react intl，它只对受控输入有效（如果值受控，则立即转换）
• 该组件是monorepo的一部分，这意味着UI组件应该具有足够的通用性，可以以任何可能的方式使用
• 该组件的用途是一个下拉选择器，这意味着用户可以键入一个单词，自动完成选项将下拉，供用户单击并“完成”搜索

进退两难的是，如果我想控制组件，我只能使用

setVal

方法来更改状态/值。例如，对于典型的react输入组件，

val

只能通过

setVal

进行更改，如下所示：

const [val, setVal] = useState();
<input value={val} onChange={e => setVal(e.target.value)} />

const[val，setVal]=useState（）；
setVal（e.target.value）}/>

但是，为了让下拉选项替换输入组件的值，它必须更改值状态。但是受控组件只有一种改变状态的方式，在这种情况下就是

setVal

，我不能改变onChange使用setVal的方式，因为这是一个可以以多种方式使用的UI组件

所以我的问题是：尽管我听起来很虚伪，但有没有一种方法可以不用

setVal

来更改输入组件的值

---

上面代码沙盒中的具体示例。具体问题见DropdownSelector.js的第128行。非常感谢您。在您的代码沙盒中，您应该：

将

labelAndValue

添加到useEffect依赖项中，或者更好：

将

onSelect

从第59行的

useffect

中移出，并移动到

onMouseDown

中

---

也许我不了解您或您的用例，但只有输入的

值
属性/属性设置其值。。。也就是说，react
useState
hook值是否为值、基于类的组件的状态是否为值、值是否随机生成等都无关紧要。。。为什么您认为只有一个“东西”可以设置输入的值属性？您还声称希望“以任何可能的方式”使用此输入，但您似乎将其使用与其实现紧密耦合。你能提供一个更好的例子来说明你想要完成什么吗？@DrewReese但这不会使输入值不受控制吗？受控输入不是由
value
设置为
useState
的
val
的输入定义的吗？并且
onChange
触发
useState
的
setVal
？如果将真实值传递给输入的
value
属性，它就是受控输入，就这么简单。任何东西都可以设置使用/传递到输入的
value
属性的值。
onChange
只是一个回调函数；它可以做任何事情，包括在任何地方都不更新任何状态。@DrewReese哦，天哪，真的吗？我不知道。。。什么是真实的价值观？无空值和未定义值？假值包括
false
，
0
，
-0
，
0n
，
'
，
未定义的
，
null
和
NaN
，几乎所有其他值都被视为真值。