baseweb
baseweb copied to clipboard
Add contextual parameters to onChange for Select and DatePicker components
<Select /> and <DatePicker /> don't offer the option of accessing name, id and other props once the onChange handler triggers. An event object with this information is accessible in the onChange handler for <Input />.
Feature description
Provide access to these variables for Select and DatePicker. It is needed when the component is being passed handler functions from an ancestor container.
@cobaltwhite can you please provide an example of what you are looking for?
Sure, I am managing the states of series of baseweb components within a master component including the onChange handlers listed below. These functions are passed on as props to child components where contain baseweb form components such as input, checkbox, select and datepicker. I am trying to capture the name or id from the event in order to update the state at the master level. I can very easily capture the values of input and checkbox listed below, but select and datepicker doesn't seem to have this support.
const handleInputChange = ({ target: { name, value } }) => {
setState(prevState => ({
...prevState,
[name]: value,
}));
};
const handleCheckboxChange = ({ target: { name, checked } }) => {
setState(prevState => ({ ...prevState, [name]: checked ? true : false }));
};
Thank you. The main problem is that onChange handler calls may not be associated with specific DOM events like the simpler input and checkbox components. You can always add additional parameters to the callback like below
function MyComponent() {
return (
<Datepicker onChange={({date}) => setState({...prevState, 'datepicker-name': date })}
);
}
Thank you. The issue I am facing is that I cant't get the target and subsequently 'name' from it. I have a master component with multiple children. Baseweb components are used within the children, so in order to handle the change from a master level by passing it through props, I either have to write a single onChange handler which I did for Input and Checkbox, or one for each component in the case Select and DatePicker as I wasn't able to retrieve the name. Not sure if this is achievable at the moment or I have to resort to the multiple handler temporary hack.
Is this issue still relevant?