I'm trying to implement this example that obtains the user selected value, but using the async select version.
I want to obtain the value that the user selected, but going through the docs on react-select this isn't clear how to do. If you set state equal to the inputValue, as soon as you click on the 'submit' button the inputValue is cleared. You get back
" "
instead of
user selected value
I'm not sure how to obtain the user selected value using the async select component. I have my API data successfully populating & filtering the suggestions box, but I can't figure out how to get the selected value.
I've tried numerous methods and lastly tried using the refs approach like in the above link, but the stored value shows up as null. Instead of storing the user selected value. Here is the link to my broken codesandbox.
Can anyone help or point me in the right direction?
Edit
Here is a link to a working demo if anyone gets stuck on this in the future.
So, what you got wrong is props of react-select to get value on on-change. Use onChange instead of onInputChange on your AsyncSelect Component. Both props are for different purpose. Here is a doc for all props available for react-select. https://react-select.com/props
Try code below
textChange = inputValue => { // whole object of selected option
this.setState({ inputValue:inputValue.value });
};
render(){
....
<AsyncSelect
defaultOptions
loadOptions={this.promiseOptions}
onChange={this.textChange} /** onChange triggers only when user change the
options but onInputChange triggers on each change which is for different
purpose like for e.g. when user type, fetch similar options **/
name="options"
/>
}
Related
On reset with submit in react-use-form, its not getting reset to default value ,derived from the react state?
please find the codesandbox link attached.
https://codesandbox.io/embed/react-hook-form-reset-usefieldarray-forked-h8jb43?fontsize=14&hidenavigation=1&theme=dark
Steps to reproduce :
Click on append and select any one of the option. Enter corresponding lastName value.
Repeat step one with different option.
Submit it. it will console out and the state (submittedData) must be updated.
Now append one more field , select option and fill lastName value, but don't click on submit.
Click on reset.
Expected to happen:
When clicked on reset (step 5) , it would have set the default values derived from the (submittedData) state, i.e. only two options should be there with the last submitted values.
Also one of the requirement after submit if the old registered field firstName option is changed the corresponding lastName field should get reset to blank value. I tried using onChange event and resetField function, but its not working.
I am new to both react and react-use-form, therefore apart from code mistakes any suggestions to make it better are welcomed...
Thanks
useForm defaultValues should be an object, but in your code it is a function. You have to call the defaultValue function and then use object spread as below.
const { control, handleSubmit, reset, formState, resetField } = useForm({
defaultValues: { ...defaultValue() }
});
I am using watch,setValue and getValues to update one dropdown selected value based on another dropdown selected value.
It can be also done using dropdown list's onChange so, onChange, setValue and getValues so no need to use of watch.
Can you please guide, watch is performance cost then using onChange or it will be fine with watch how its implemented below (without onChange).
const dropdownList_1_watch_value = watch(dropdownList_1);
useEffect(()=>{
if (dropdownList_1_watch_value !== 'specificValue') && getValues(dropdownListControlName) !== defaultValue)
{
setValue(another_dropdownListControlName, defaultValue);
}},[dropdownList_1_watch_value]);
return (
<>
// list of dropdown list components and other controls
</>
);
Regarding performance there shouldn't be much of a difference between those to.
I will cite from a blog post:
React Watcher should be used sparingly, in cases where you can't
really solve the problem any other way. In most cases, where you need
to do something when some prop changes, you don't really need it. Why?
Because in most cases you can usually trigger the event together with
the action with caused the prop to be changed, e.g. when triggering a
filtering change on a listing.
Full post: http://sborrazas.com/blog/react-watcher
I'm new to this library, I'm not sure if I missed something in the docs...
I'm trying to console.log the user's input through an onChange event (your average onChange that fires every time the input field changes). However the event only fires when a user selects an option, and the value that get's logged is the value of one of the select options, not the user input.
I'm guessing it's because it's more of a select option type of component, rather than an input component.
How do I go around implementing what I want here?
<Select onChange = {handleChange} options = {data} />
const handleChange = (e) => {
console.log(e)
}
EXTRA NOTE:
My purpose for accessing the user input is, because my data array containst more than 7000 items, to change the data array to render less than 10 items according to use input, so that my app doesn't lag.
I am currently working with react-select with single selection. After selecting a particular value, I would like the user to be able to edit the typed in text (not necessarily the same as the rendered option (formatOptionLabel).
https://codesandbox.io/s/react-select-course-dfmn2?file=/src/Selector.tsx
For example, if I typed in PHYS101, and then select the option PHYS101 ... joe, and then proceed to edit the text, for backspace the form would be come PHYS10 and if I type A then it would be PHYS101A.
I attempted to use the onInputChange and onChange props, but I cannot get it to work consistently. I would appreciate any suggestions or snippets of code I could use.
There is a similar issue. Maybe that could help.
Here is a link to the issue. react-select custom tag edit feature
OR
If you wanna switch over to some other library for your specific purpose.
You could use react-selectize.
You can provide props to edit the selected option.
I solved it like this.
I pulled a reference to the internals via ref
<Select
ref={selectRef}
onChange={onOptionSelect}
/>
and in the useEffect.
useEffect(() => {
const selectObj = selectRef?.current
if (selectedOption?.value && selectObj) {
selectObj.state.inputValue = selectedOption?.value
}
}, [selectedOption])
I'm using the React Switch component straight from this website: http://react-materialize.github.io/react-materialize/?path=/story/components-switch--switch. I put this into my SideNav like so:
<Switch
id="Switch-11"
offLabel="Off"
onChange={(e) => exampleFunction(e)}
onLabel="On"
/>
I did it so that when the switch is clicked, it would call "exampleFunction()" which contains this:
const exampleFunction = (e) => {
console.log(e.target.value)
}
The problem is that when I look at the console for the value of the switch, it is always "on," even if I press it multiple times. I'm a little lost as to why this happens. Any advice would be appreciated. Thanks.
If you want to know whether the checkbox is checked, you need to use e.target.checked, looking at the source code from materialize, we can see the onChange is passed directly to the input element, so you need to use the checked attribute of the input element.
The value attribute has the following definition:
The value property sets or returns the value of the value attribute of a checkbox.
For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).
From: https://www.w3schools.com/jsref/prop_checkbox_value.asp