我在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
};
}
发布于 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>
https://stackoverflow.com/questions/50603566
复制相似问题