score:2
Accepted answer
As @julien mentions, you can use ref instead of JQuery to get the current value of the select in an uncontrolled component:
class MySelect extends React.Component {
constructor(props) {
super(props);
this.state = { currentValue: this.props.defaultValue };
}
updateValue() {
this.setState({ currentValue: this.refs.myselect.value });
}
render () {
return (
<div>
<div>
<button className="current" onClick={this.updateValue.bind(this)}>{this.state.currentValue}</button>
</div>
<select ref="myselect" defaultValue={this.props.defaultValue}>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
);
}
}
For the other part, defaultValue
should work just as you were trying.
Check this example fiddle: https://jsfiddle.net/y64gbhf8/1/
score:0
you can try Uncontrolled Components
you don't need to write event handler for state update,DOM will handle it, then you can use a ref to get form values from the DOM
Source: stackoverflow.com
Related Query
- ReactJS: Select with default value from props without onChange event?
- How to fetch onChange from select value only when select ? is it possible without using useEfect?
- Reactjs select value opition value map iteration with default value
- typesafe select onChange event using reactjs and typescript
- ReactJS can't set state from an event with event.persist()
- How to get pasted value from Reactjs onPaste event
- ReactJS - trigger event even if the same option is selected from select dropdown
- ReactJs Select add default value
- Using an input field with onBlur and a value from state blocks input in Reactjs JSX?
- How to pass an object value in a form's select field onChange (using React, without Redux)
- How to select text to copy without triggering click event in reactjs
- Force input's onChange event bubble to parent form with the value stored in the state
- Setting a default value on a react select dropdown that is populated from an API call
- Populate react select options array with key value pairs from firebase collection
- How to get input value of TextField from Material UI without using onChange event?
- react/redux:Get the latest props value from state after updating props with dispatch right away
- Reactjs onClick event how to select a specific button from a list
- How to populate select dropdown elements with data from API - ReactJS
- show default value in select input with backgroundcoulr different for each : react js
- How to capture onChange event from a field with object type State
- TinyMCE with ReactJs - onChange event only firing once
- Reactjs functional component default props with props object
- Cant get event.target.value using select item from material-ui autocomplete with onchange
- onChange event select in ReactJs
- handing dynamic onchange event from array in reactjs
- keep a variable type when I get value from input onchange with React-hooks
- Insert value of a select with axios in reactjs
- Reactjs Hook onChange with react-datepicker, invalid time value error
- React: Cannot set state from onchange event handler on form select
- 'this' is null when working with onChange event on a reactjs check box
More Query from same tag
- How to Add route links to material ui tabs in react typescript
- Component does not re-render although redux state is updated
- How to make POST Request through react.js?
- Conflict with basename and Redirect with build in react
- How to call React's render method() from another component?
- Redux toolkit typescript type issue with next js and next-redux-wrapper
- How to bypass policies when testing with hyperstack
- Material-UI have different style result in production mode?
- Firebase data changes state but does not render component
- Can I avoid sending props to child and back?
- How to serve a React component library dependent on Styled Components to another library that also has a Styled Comopnents dependency?
- How to call useQuery hook conditionally?
- React useEffect() alert once after dependences change
- React Router wildcard paths on root directory
- How to embed react component on other domains?
- Using Hook to control form fields with an Object
- React KeyDown event handler in compnent - function error
- react testUtils simulate click on a radio button not triggering onchange
- Adding props to constructor as this.prop
- How to loop through object in JSX using React.js
- React Rerender dynamic Components (Solr)
- How i can realize such logic with class components
- Adjust height of React Cards without including collapse
- making a post request inside mapDispatchToProps in react-redux
- How to autoplay the next song onClick on a btn
- Using React.cloneElement() in JSX
- Losing style of tr element when being dragged with react-sortable-hoc
- Why does React warn against an contentEditable component having children managed by React?
- React app not sending files to php server with Ajax
- Images not displaying in React App