I try to handle a multiple form select option, in ReactJS. I have tried to be inspire of javascript classic code to handle that, but I fail.
My code just don't send me the values selected. How handle that ?
Here my code :
class ChooseYourCharacter extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.option});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select multiple={true} value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<ChooseYourCharacter/>,
document.getElementById('root')
)
Of my basic understanding, when you try to handle a Select form element in reactJS you generates an object in HTMLOptionsCollection.
The fundamental root to this object methods and properties is e.target.options.
Your items are stored in e.target.options.value property.
To access to a value stored in the options.value object, you can use the [i] loop value, hence e.target.options[i].value property.
The e.target.options[i].value return strings data types.
Following what I have just said, I assume the objects are stored respecting a number increasing convention as following :
e.target.options[i].value where { [i] : value, [i +1] : value (...)}...
By using e.target.options[i].selected you can control if there is a value stored at a specific location.
e.target.options[i].selected return you a boolean value, useful to handle the code flow.
It's up to you now.
Here my code to handle multiple select form in JSX with javascript code :
// Create the React Component
class ChooseYourCharacter extends React.Component {
// Set the constructor
constructor(props) {
super(props);
this.state = {value: 'coconut'};
// bind the functions
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// extract the value to fluently setState the DOM
handleChange (e) {
var options = e.target.options;
var value = [];
for (var i = 0, l = options.length; i < l; i++) {
if (options[i].selected) {
value.push(options[i].value);
}
}
this.setState({value: value});
}
// display in client-side the values choosen
handleSubmit() {
alert("you have choose :" + this.state.value);
}
(...)
Here is how to get the options selected by the user using a functional component and the useState hook rather than a class component:
import React, { useState } from "react";
const ChooseYourCharacter = function(props) {
const [selectedFlavors, setSelectedFlavors] = useState([]);
const handleSelect = function(selectedItems) {
const flavors = [];
for (let i=0; i<selectedItems.length; i++) {
flavors.push(selectedItems[i].value);
}
setSelectedFlavors(flavors);
}
return (
<form>
<select multiple={true} value={selectedFlavors} onChange={(e)=> {handleSelect(e.target.selectedOptions)}}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</form>
);
};
export default ChooseYourCharacter;
Currently learning React and I noticed this same code on the reactjs.org site. Below is my solution for handling multiple selected options.
in the constructor, use an array for the initial value for 'value' in the state
in the handleChange method, convert the event target's selectedOptions (HTMLOptionsCollection - array-like) to an array using Array.from(), and use a mapping function to get the value from each item
class ChooseYourCharacter extends React.Component {
constructor(props) {
super(props);
//this.state = {value: 'coconut'};
this.state = {value: ['coconut']};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
//this.setState({value: event.option});
this.setState({value: Array.from(event.target.selectedOptions, (item) => item.value)});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select multiple={true} value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<ChooseYourCharacter/>,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
As you are using multi-select you should declare your state variable as an array
constructor(props) {
super(props);
this.state = {value: []};//This should be an array
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
I have created a blog for reactjs form posting with multi select control. You may go here for more details https://handyopinion.com/git-commands-cheat-sheet/
I am using react bootstrap 4 here
<Form.Group >
<Form.Label>Form Label</Form.Label>
<Form.Control
as="select"
multiple
// value={formCatState}
onChange={(event) => {
let target = event.target as HTMLSelectElement
console.log(target.selectedOptions);
}}
>
<option>example cat 1</option>
<option>Example cat 2</option>
<option>Example cat 3</option>
<option>Example cat 4</option>
</Form.Control>
<Form.Text muted> hold ctrl or command for multiple select</Form.Text>
</Form.Group>
Related
If I have a dropdown with some options, I am able to display it properly and select and correct value getting displayed but for my use case, I wanted a modified value to be shown. Code taken below from react official documentation -
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
In the dropdown when I select Mango, I just want to show the first 4 letters that are selected in dropdown, in this case Mang. How to do that?
you can use substring method on your string and shorten it
alert('Your favorite flavor is: ' + this.state.value.substring(0,4);
I can't select more than one value. How can I fix it?
import React from "react";
import ReactDOM from "react-dom";
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: ["grapefruit", "coconut"] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: [event.target.value] });
}
handleSubmit(event) {
alert("Your favorite flavor is: " + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select
multiple={true}
value={this.state.value}
onChange={this.handleChange}
>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<FlavorForm />, document.getElementById("root"));
You'll need to get the value of all the currently selected options:
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: ["grapefruit", "coconut"] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const value = Array.from(event.target.options) // get an array of all options
.filter(el => el.selected) // remove not selected
.map(el => el.value); // get the values
this.setState({ value });
}
handleSubmit(event) {
alert("Your favorite flavor is: " + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select
multiple
value={this.state.value}
onChange={this.handleChange}
>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<FlavorForm />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You need to use e.target.options not e.target.value then loop through and return/setState with the selected options array:
Using forEach:
handleChange (e) {
const options = e.target.options;
let value = []
options.forEach((option)=> option.selected && value.push(option.value))
this.setState({ value })
}
Using reduce:
handleChange (e) {
const value = e.target.options.reduce((selected, option)=> option.selected ? [...selected , option.value] : selected , [])
this.setState({ value })
}
You need to also add a size attribute to your select element
<select
multiple={true}
value={this.state.value}
onChange={this.handleChange}
size={4}
>
would allow the user to select up to 4 options
I am trying to create a simple drop down in react and I am facing two issues. The code that I have is:
import React from "react";
class EditEmployee extends React.Component {
constructor() {
super();
this.state={
salary:''
}
}
validateSalary=(e)=>{
// e.persist();
var val=e.target.value;
this.setState((prevState)=>{prevState.salary=val})
}
render() {
return (
<form>
<div className="form-group">
<label>Salary:</label>
<select onChange={this.validateSalary} className="form-control" value={this.state.salary}>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
</div>
</form>
);
}
}
export default EditEmployee
Issue 1 - When I select an option, I am able to get the value in the console, but the drop down is not showing the selected value. I am setting the state properly and I am not sure why is it not updating the view.
Issue 2 - If I directly access the event inside setState I get an warning about synthetic event and the code does not work. Why do I need e.persist() to avoid it?
validateSalary(e){
// e.persist();
var val=e.target.value;
this.setState({
salary = val
});
}
<select onChange={e => this.validateSalary(e)} className="form-control" value={this.state.salary}>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
OR
you need to change your function
validateSalary=(e)=> {
var val = e.target.value;
this.setState({
salary = val
});
}
Can you try this code. I think it is problem in some callback
Try with this change
validateSalary=(e)=> {
let val = e.target.value;
this.setState({salary:val})
}
This will solve your both the issues.
import React from "react";
class EditEmployee extends Component {
constructor(props) {
super(props);
this.state = {
salary: ""
};
}
validateSalary = e => {
// e.persist();
const { name, value } = e.target;
this.setState({ [name]: value }, function() {
console.log(this.state);
});
};
render() {
return (
<form>
<div className="form-group">
<label>Salary:</label>
<select
name="salary"
onChange={this.validateSalary}
className="form-control"
value={this.state.salary}
>
<option value="">Please select salary</option>
<option value="20000">20000</option>
<option value="30000">30000</option>
<option value="40000">40000</option>
<option value="50000">50000</option>
</select>
</div>
</form>
);
}
}
export default EditEmployee;
i'm consoling the state after state is updated, because if you console the state outside you will get previous state value.
I have the following code, verbatim from the React docs:
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'coconut' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { options } = event.target;
console.log(options)
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
<input type="submit" value="Submit" />
</label>
</form>
);
}
}
As it is, if I try console.log(options), I get the error:
Error: Converting circular structure to JSON.
However, moving the <label> tag up (so we have):
<label>Pick your favorite La Croix flavor:</label>
Allows the console.log() to work as intended.
Why does moving the label have this effect?
Working example here.
It seems that this is an issue with StackBlitz, as the same code works as expected on CodeSandbox and JSFiddle.
How can I link to a value when selected onChange in a select box?
Looking to implement a select menu into ReactJS that links to the value onChange.
render() {
return (
<select onChange={() => {if (this.value) window.location.href=this.value}}>
<option value="">Please select</option>
{pages.map(({ node: page })=> (
<option key={page.id} value="{page.slug}">{page.title}</option>
))}
</select>
);
}
This is getting the value (I believe) but I keep getting the error of Cannot read property 'value' of undefined
I have tried following the documents here as suggested in some answers yet I have not been able to get this working with my current code - see as follows the full Page.js
import React from 'react'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import config from '../utils/siteConfig'
const PageCompany = ({data}) => {
const {title,slug} = data.contentfulCompanyPage;
const pages = data.allContentfulCompanyPage.edges;
return(
<Wrapper>
<CompanyMenu>
<div>
<select onChange={() => {if (this.value) window.location.href=this.value}}>
<option value="">Please select</option>
{pages.map(({ node: page })=> (
<option key={page.id} value="{page.slug}">{page.title}</option>
))}
</select>
</div>
</CompanyMenu>
</Wrapper>
)
}
export const companyQuery = graphql`
query companyQuery($slug: String!) {
contentfulCompanyPage(slug: {eq: $slug}) {
title
slug
keywords
description
heroBg {
sizes(maxWidth: 1500) {
src
}
}
}
allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
edges {
node {
id
title
slug
}
}
}
}
`
export default PageCompany
Instead of making use of Global window.location property you can make a separate method handleChange like :
constructor(props) {
super(props);
this.state = { }; // initialise state
// Make sure to bind handleChange or you can make use of arrow function
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const targetValue = e.target.value;
// Then you can do whatever you want to do with the value
this.setState({
[name]: targetValue
});
EDIT : In order to make use of constructor make sure you are defining components using class syntax like:
import React , { Component } from 'react';
class PageCompany extends Component {
constructor(props) {
super(props);
this.state = { }; // initialise state
this.handleChange = this.handleChange.bind(this);
}
// Make sure class has a render method
render () {
return ()
}
}
And inside your <Select> You can reference it to handleChange
<select onChange={this.handleChange}>
You can read more about onChange Here
You need to pass the event param and then grab the value from the target of that event e.g.
onChange={(event) => this.setState({value: event.target.value})}
There's a great example here.
Full code excerpt from linked docs:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}