Javascript 输入值不为'；在“反应选择”中选择选项时不会更改

我正在使用在react应用程序中定义一个选择输入控件。以下是我使用组件的方式：

<Select
   onChange={function(e) {console.log(e)}}
   options={[
      {value: "sf", label: "San Francisco"},
      {value: "nyc", label: "New York City"}
   ]}
></Select>

在选择任何选项之前，我会看到一个

选择…

占位符作为输入值。选择一个选项后不会改变：输入值不会改变，

Select…

占位符显示为选中的“选项”

---

我使用组件的方式有问题吗？

定义

状态变量中的
选择
值，然后
日志更改
函数将返回
对象
，将
对象的
值
分配给状态变量，它将工作，检查此代码：


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:''}
}
日志更改（val）{
console.log（“所选：+val.value”）；
this.setState（{value:val.value}）；
}
render（）{
变量选项=[
{值：'1'，标签：'1'}，
{值：'two'，标签：'two'}
];
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））
定义
选择
状态变量中的
值，并且
日志更改
函数将返回一个
对象
，将该
对象
的
值分配给状态变量，它将工作，检查此代码：


类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:''}
}
日志更改（val）{
console.log（“所选：+val.value”）；
this.setState（{value:val.value}）；
}
render（）{
变量选项=[
{值：'1'，标签：'1'}，
{值：'two'，标签：'two'}
];
返回(
)
}
}
ReactDOM.render（，document.getElementById（'app'））

我接受你的答案，因为它显然是有效的，尽管我觉得里面有些不对劲。为什么我应该是管理Select组件内部状态的人？如果Select组件在选择选项时负责设置输入值，不是会更有效率吗？除了丑陋之外，不这样做的选择还有一个性能代价：每当用户选择一个选项时，必须重新呈现整个应用程序（因为全局状态发生变化），而不是只重新呈现选择组件。也许有更好的方法？我接受你的答案，因为它显然有效，尽管我认为有些东西看起来不对劲。为什么我应该是管理Select组件内部状态的人？如果Select组件在选择选项时负责设置输入值，不是会更有效率吗？除了丑陋之外，不这样做的选择还有一个性能代价：每当用户选择一个选项时，必须重新呈现整个应用程序（因为全局状态发生变化），而不是只重新呈现选择组件。也许有更好的办法？