使用ReactTS中已选定的选项创建select组合框
使用ReactTS中已选定的选项创建select组合框
提问于 2018-05-30 19:30:42
我在ReactTS中动态地生成了一个选择组合框，只是想弄清楚如何根据我的状态/属性来设置所选的项？
到目前为止，我的代码可以很好地生成选择框，我只是不知道如何将适当的选项设置为"selected“，如果它与道具中的"selectedGroupingOption”值匹配
我的班级
interface IGroupingProps {
groupingOptions : string[],
selectedGroupingOption : string
}
class GroupingSelector extends React.Component<IGroupingProps, {}> {
public render() {
return (
<div className="Grouping-selector">
<div className="Horizontal-panel-right Grouping-search-combo">
<select>
{this.props.groupingOptions.map((name, index)=>
<option key={index}>{name}</option>
)}
</select>
</div>
<div className="Content Horizontal-panel-right">
Group by
</div>
</div>);
}
}
function mapStateToProps(state: any) {
return {
groupingOptions: state.groupingOptions,
selectedGroupingOption: state.selectedGroupingOption
};
} 回答 1
Stack Overflow用户
发布于 2018-05-31 17:14:56
React在根select标记上使用一个值属性。这在受控组件中更方便，因为您只需要在一个位置对其进行更新。(source)
因此，要将此应用到您的代码中：
<select value={this.props.selectedGroupingOption}>
{this.props.groupingOptions.map((name, index)=>
<option value={name} key={index}>{name}</option>
)}
</select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50603566
复制相关文章
相似问题