I am having an ADD button which allows me to add some objects to the option that I selected in the dropdown. And I also have a function attached to that Add Button.
onAddClicked = () =>{
this.setState({
showOptions: true
});
}
<button type="button" onClick={this.onAddClick}
style={{ float: "right", marginLeft: "10px", marginRight: "10px" }}
id="AddSelectedTag"
className={((this.state.selectedOptions ?this.state.selectedOptions.length === 0 : true) ?
"re-btn-primary-inactive" : "re-btn-primary-blue")}disabled={(this.state.selectedOptions ?
this.state.selectedOptions.length === 0 : true) ? true : false}>Add
</button>
I can select and option and few objects under it. Now I need to display an error message when I want to change my option after selecting few objects under that. I am having state for my selected options as "this.state.selectedOptions". I am trying
if(this.state.selectedOptions ? this.state.selectedOptions.value : null)
{
alert("selectedOptions value has changed");
}
But this is returning an alert message everytime I click on the Add button, not when I try to change the state.
onViewAllTagClick = (event) => {
this.setState({
showTagsSysController: true,
selectedOptions: event,
});
}
<li id="viewAllTags" className="re-exp-pak-edit-system-li">
<div className="re-lbl-normal-12">
<Select id="selectTags"
styles={ddlUtils.getSnapDdlStyle(200)}
placeholder="Select Tag, Network or Hardware "
options={[{label:"Tag",value:2,isChild:0},
{label:"Network",value:5,isChild:0},
label:"Hardware",value:3,isChild:0},
]}
value = { this.state.selectedOptions}
isSearchable={false}
isDisabled={this.state.isEdit === true}
noOptionsMessage={() => null}
onChange = {this.state.selectedSystems !== null ? this.onViewAllTagClick : null}>
</Select>
Add an event listener like componentDidUpdate and compare props
componentDidUpdate(prevProps) {
if(this.props.selectedOptions !== prevProps.selectedOptions)
alert("selectedOptions value has changed");
}