I am using react semantic ui dropdown and want to handle onclick event on my dropdown. consider i have this method to handle
handleClick = (e, {value }) => this.setState({id: value })
then i can call with this
<Dropdown
selection
options={myOptions}
placeholder='I change value on keyboard navigation'
onClick={this.handleClick} />
but in some circumstances i want to call handleClick with additional parameter, i've tried this
<Dropdown
selection
options={myOptions}
placeholder='I change value on keyboard navigation'
onClick={this.handleClick.bind(this,idx)} />
and change my handler to handleClick = (e, {value },idx) => this.setState({id: value }) but it seems not working. What am i doing wrong or any suggestion?
I think this part is not executing like this
onClick={this.handleClick.bind(this,idx)}
It should be change to this
onClick={(idx) => this.handleClick.bind(this,idx)}
In React when we have to pass the arguments with function on click , then we have to add arrow notation like above.
If this help doesn't work for you then I think you have to change your binding
Then Following code will help you
Change onClick={this.handleClick.bind(this,idx)} to this
onClick={(e, e.target.value, idx) => this.handleClick(e, e.target.value, idx)}
And also change
handleClick = (e, {value },idx) => this.setState({id: value })
to this
handleClick = (e, value, idx) => this.setState({id: value })
Related
I want to change the state whenever I delete an element from the react-select multi varient select option.
There is a second param in the onChange function for react-select, where it captures the context, meaning it has information about what action is performed or what element got removed.
const onChange = (value, context) => {
// console.log(value);
if (context.action === "remove-value") {
console.log(context.removedValue.id);
const newState = newitems.filter(
(item) => item.id !== context.removedValue.id
);
setnewitems(newState);
}};
<Select
isMulti
options={options}
onChange={onChange}
/>
I am using a Material UI Select Component to render a simple drop down menu, with its value as a state declares using the useState method.
const [collaboratingTeams, setCollaboratingTeams] = useState([])
The below code is of the Select Component, with its value and the corresponsing handler function in its onChange prop.
<Select
validators={["required"]}
errorMessages={["this field is required"]}
select
multiple
variant="outlined"
value={collaboratingTeams}
name="collaboratingTeams"
onChange={(e) => handleSelectCollaboratingTeams(e)}
helperText="Select Collaborating Teams "
>
{arrTeams.map((option, index) => (
<MenuItem
key={option.teamId}
value={option.teamId}
variant="outlined"
>
<Checkbox
checked={collaboratingTeams.indexOf(option.teamId) !== -1}
/>
<ListItemText primary={option.teamValue} />
</MenuItem>
))}
</Select>
The below code is the function that triggers when a drop down data is changed.
This function sets the state, which should then technically update the Select's selected options.
const handleSelectCollaboratingTeams =(e)=>{
setCollaboratingTeams(e.target.value)
}
The issue is, the setCollaboratingTeams method isn't updating the state only. I understand that the setstate method in hooks works so coz of its asynchronous nature but at some point it should display up right. Don't understand where I'm going wrong.
I expect the collaboratingTeams array to be updated with a new value when a new value is selected by the user.
you should define the new state for storing the selected item.
Example for class component:
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
};
Example for functional component(using React-hook):
const [selectedOption, setSelectedOption] = useState(null);
handleChange = selectedOption => {
setSelectedOption(selectedOption);
};
dont use arrow function with onchange it often used when we need to pass id or some other data
How to get status value as "APPROVED" when 'APPROVE' button is clicked, and "DENIED" when 'DECLINE' is clicked. Thank you
After searching, i din't get any reference. So, I added onClick to both buttons and passing Approve,Declined values from that on click function to
onClick={() => clickedOnSubmit('Approve')}
onClick={() => clickedOnSubmit('Decline')}
clickedOnSubmit = (type: any) => {setSubmitType(type) }.
here i'm setting the state value. on onSubmit i'm using that submitType. This is working in my case.
onClick={() => form.setValue('name', 'value', { shouldValidate: true })}
I have some input boxes, select drop down, and date picker that are not being reset like I thought they would. Let's start with the input box and select drop down. Here is their code:
<StyledInput
onChange={handleSearchChange}
value={searchText}
placeholder={"Search..."}
/>
<SelectDropDown
isClearable={false}
isSearchable={false}
strict={true}
allowInvalid={false}
getOptionLabel={opt => opt.name}
getOptionValue={opt => opt.value}
value={searchOptions.find(opt => opt.value === searchCol)}
options={searchOptions}
onChange={value => {
handleColSelect(value);
}}
/>
Notice the handleSearchChange and handleColSelect:
const handleColSelect = value => {
setSearchCol(value.value);
};
const handleSearchChange = event => {
setSearchText(event.target.value);
};
I have a button that I want to reset these to their initial states (i.e. get rid of text in the input box, and reset the SelectDropDown).
I've tried doing so:
const clearFilters = () => {
setSearchText(undefined);
setStartDate(undefined);
setEndDate(undefined);
setSearchCol(undefined);
};
And in my button, simply this:
<GreenOutlineButton
onClick={() => {
clearFilters();
}}
>
Clear Filters
</GreenOutlineButton>
There is another part to this to remove the queryParams that are set, and my button does so- however, it does not take away the text or reset the dropdown. Any ideas here?
From the look of it, setSearchText("") should work fine. For the SelectDropDown, you need to add one more entry to the options which will be your default entry. You can do this as follows:
options={[...searchOptions,{label:"Placeholder", value: null}]}
Then, inside clearFilters, use:
setSearchCol(null)
This should give you the desired result. Let me know if this works.
React-select default behavior is to have the menu pop open when the input value is empty. I want to modify this behavior so that when the input is empty, whether before a user has typed anything or the user has backspaced to get to the empty state, the menu will be closed.
I could not find any prop that enables this behavior, so I thought to do it programmatically, by calling some function that closes the menu in onInputChange. Something like:
onInputChange={(inputValue) => {
this.setState({
inputValue,
});
this.selectRef.closeMenu();
}}
I tried using blur() on the Select ref but it just blurred the input without closing the menu, definitely not the behavior I'm looking for.
Is there a prop or function that's exposed that can fulfill my needs?
You can set the menuIsOpen prop onInputChange like this:
handleInputChange = input => {
this.setState({ open: !!input });
}
<Select
onInputChange={this.handleInputChange}
menuIsOpen={this.state.open}
/>
I kept the open state separately
const [open, setOpen] = useState(false);
<Select
menuIsOpen={open}
onMenuOpen={() => setOpen(true)}
onMenuClose={() => setOpen(false)}
/>
and set false when I want to close it. In this case, like this
onInputChange={(text) => {
if (text === '') {
setOpen(false);
}
}}