I have two dropdowns, the second controlled by the first. When selecting a value in the first dropdown, it sets a new list of options for the second dropdown.
The problem I have is the selected index of the second dropdown is being remembered, and I don't see a clear way to set the selected index. If this was just javascript, I'd just set the selected index. But being react, I'm not sure what I should do.
render() {
let renderWorkItemTypes = (workItemType: TFS_WorkItemTracking_Contracts.WorkItemType) => {
return <option value={workItemType.name}>{workItemType.name}</option>;
};
return <select onChange={this.props.workItemTypeChanged}>{this.props.workItemTypes.map(renderWorkItemTypes) }</select>;
}
Damien Leroux :
I advice you using the props value of <Select> as described by React:\n\n<select value=\"B\">\n <option value=\"A\">Apple</option>\n <option value=\"B\">Banana</option>\n <option value=\"C\">Cranberry</option>\n</select>\n\n\nWhen your onChange triggers, edit your component state with setState and change the <select> value: <select value={this.state.value}>? Having the select field value depending on your component state allows you to control the default value and therefore to change it when the first select field resets the second select field.",
2016-06-02T06:16:14