onChange is not triggering in react js
There is no issue with the react-dropdown
library. Here is the code sandbox that I've set up and corrected OP's code. It works.
import React from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
const options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two", className: "myOptionClassName" }
];
const defaultOption = options[0];
class WebDashboardPage extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedValue: ""
};
}
quan = value => {
this.setState({ selectedValue: value });
};
render() {
return (
<Dropdown options={options} value={defaultOption} onChange={this.quan} />
);
}
}
export default WebDashboardPage;
onChange event is not being triggered in react js
I am assuming Form.Control is a custom control or a third-party control, hence you cannot convert it to a controlled input. You could try creating a ref and get the value from the ref in the onChange event handler. If the custom control is not a third party control, then you could add the onChange handler inside the Form.Control component and pass a function reference to the control.
Edit:
Here is your solution : https://codesandbox.io/s/vigorous-mclean-4jusl?file=/src/App.js
In case you see an error in the sandbox, refresh the page. There seems to be some error with codesandbox.
Explanation:
Create a ref to access the input using useRef:
const controlref = useRef();
Pass the ref to the control:
<Form.Control
onChange={handleChange}
**ref={controlref}**
type="text"
placeholder="search..."
/>
Get the value in onChange using the ref:
const handleChange = (e) => {
console.log(controlref.current.value);
setSearch(controlref.current.value);
};
Select value doesnt change the first time I trigger onChange event when using setSate React
The problem is that when you provide onChange prop to select component it become a controlled component.
For more information: React Docs - Forms #controlled components
When you dealing with controlled components you must provide a value to it and when onChange triggerd it should update that value to work properly. Since you did not provide the full code, I imagine you have an array of select menus and options attached to it.
So in this case every select component should have own onChange method and own value to work properly. To achive this we should create another component for only Select Options. Like this;
function SelectComponent({ optionList, onSelected }) {
const [value, setValue] = useState();
const updateValue = ({ target }) => {
setValue(target.value);
if (onSelected) onSelected(target.value);
};
return (
<>
<label htmlFor={optionList.id}>{optionList.label}</label>
<select
id={optionList.id}
name={optionList.name}
value={value}
onChange={updateValue}
>
{optionList.options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
<button>{optionList.buttonLabel}</button>
</>
);
}
This component accepts to props; optionList and onSelected
optionList is the list of options to render
onSelected is a method that we call when user select and option
On main component, we should change the select section with our select component with props optionList and onSelected
return (
<div>
{selectMenus.map((select) => (
<div key={select.id} className="select-container">
<SelectComponent optionList={select} onSelected={updateValue} />
</div>
))}
</div>
);
So overall code is like this:
import { useState } from "react";
import { v4 as uuid } from "uuid";
export default function App() {
const [url, setUrl] = useState();
const updateValue = (value) => {
setUrl(value);
};
const selectMenus = [
{
id: 1,
label: "Menu 1",
name: "menu1",
buttonLabel: "Menu 1",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
},
{
id: 2,
label: "Menu 2",
name: "menu2",
buttonLabel: "Menu 2",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
},
{
id: 3,
label: "Menu 3",
name: "menu3",
buttonLabel: "Menu 3",
options: [
{
text: "option 1",
value: "option1"
},
{
text: "option 2",
value: "option2"
},
{
text: "option 3",
value: "option3"
}
]
}
];
return (
<div className="App">
<h1>URL Value: {url}</h1>
{selectMenus.map((select) => (
<div key={select.id} className="select-container">
<SelectComponent optionList={select} onSelected={updateValue} />
</div>
))}
</div>
);
}
function SelectComponent({ optionList, onSelected }) {
const [value, setValue] = useState();
const updateValue = ({ target }) => {
setValue(target.value);
if (onSelected) onSelected(target.value);
};
return (
<>
<label htmlFor={optionList.id}>{optionList.label}</label>
<select
id={optionList.id}
name={optionList.name}
value={value}
onChange={updateValue}
>
{optionList.options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
<button>{optionList.buttonLabel}</button>
</>
);
}
Working example is overhere codesandbox
React onChange not triggering from Div
I was able to fix this by using adding a small function in the parent component and then calling it as a prop in an onInput
function, while leaving the onChange
function set to props.onChange. The function was taken from the article below.
http://usefulangle.com/post/41/javascript-textarea-autogrow-adjust-height-based-on-content
Related Topics
What Does Webkitformboundary Mean
Merge Two Json/Javascript Arrays in to One Array
How to Send a Http Delete Request from Browser
Syntaxerror: Cannot Use Import Statement Outside a Module
Changing Svg Image Color With JavaScript
Passing Data from Node Js to HTML Using Ejs
Convert a Flat Json File to Tree Structure in JavaScript
How to Avoid Scientific Notation for Large Numbers in JavaScript
Regexp to Match Every Occurence After N Occurences
How to Push Value Pair into Object Using Method
React How to Fix Failed Prop Type - Invalid Prop of Type String Expected Object
How to Send One Alert from My Node.Js to My JavaScript Client
Using Ajax to Post a Variable to Another PHP File
Can You Combine Multiple Images into a Single One Using JavaScript