<DropdownButton bsStyle="default" title="No caret" noCaret id="dropdown-no-caret">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>
I took this example from the react-bootstrap components examples, https://react-bootstrap.github.io/components.html#btn-dropdowns-nocaret
How would you update the button title when one of the menu item is selected?
Set the title using a state and add an onChange event to you DropdownButton to update the state
<DropdownButton bsStyle="default" title={this.state.btnTitle} noCaret id="dropdown-no-caret" onChange={this.handleChange}>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>
Function:
handleChange = () => {
var val = 'someValue';
this.setState({btnTitle: val});
}
This will change the title when you select any MenuItem. I hope this solution helps you
Related
I have a TextField in Material UI used as Select. The MenuItems are working fine in the form, but I'm not being able to pre select an option based on data on a state previously populated
I have this , and as example I want to preselect "Familia 3" , What I'm supposed to set up?
<Textfield id="family" select value=0 defaultValue=3 >
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
I tried changing Value, DefaultValue , removing one of them, and couldt find a solution
AI bet is very simple but I cant find any solution to show up with option "Familia 3" preselected
Can you help me with this?
Thanks !
Default value is not applicable in the select TextField
set your initial value as the value prop.
You have misspelling in the Textfield opening tag it should be TextField
when assigning a non string value to an attribute always use curly brackets ie: value={3}
<TextField id="family" select value={3}>
<MenuItem value="0">Seleccionar</MenuItem>
<MenuItem value="1">Familia 1</MenuItem>
<MenuItem value="2">Familia 2</MenuItem>
<MenuItem value="3">Familia 3</MenuItem>
</TextField>
You can store Familia 3 into the state and than set the value of text field to state
const [initial value, setinitialvalue ] = use state("Familia
3")
<Textfield id="family" select value={initialValue}
onChange={(e) => setinitialvalue(e.target.value) }
defaultValue=3 >
<MenuItem value="Seleccionar
">Seleccionar</MenuItem>
<MenuItem value="Familia 1">Familia 1</MenuItem>
<MenuItem value="Familia 2 ">Familia 2</MenuItem>
<MenuItem value="Familia 3">Familia 3</MenuItem>
</TextField>
thanks for being here! My question is related to how I can create an 'onChange' property in the Material UI Menu component. When I am using the 'onChange' property of the Select component, I can easily alter my state after the user clicks on it. I would like to create a similar effect, but then using a Menu instead of a Select component. Note that I am using a function inside a hook, which might complicate things.
Below I could show you how an example of how my code looks:
const [sortingMethod, setSortingMethod] = useState(() => sortHighestSummerTemp);
const onSortMethod = (e) => {
setSortingMethod(e.target.value);
};
<FormControl>
<InputLabel shrink>Sort By </InputLabel>{' '}
<Select defaultValue="" onChange={onSortMethod}>
<MenuItem value={() => sortHighestSummerTemp}>☀️ Hottest summers</MenuItem>
<MenuItem value={() => sortLowestWinterTemp}>🥶 Coldest winters</MenuItem>
<MenuItem value={() => sortMostHotDays}>🥵 Most hot days</MenuItem>
</Select>
</FormControl>;
That's my select component in action, which is working. And here is the same Menu, where I don't know how to implement the "onChange":
<FormControl className={classes.formControl}>
<PopupState variant="popover" popupId="demo-popup-menu">
{(popupState) => (
<React.Fragment>
<Button
variant="contained"
color="primary"
startIcon={<SortIcon />}
{...bindTrigger(popupState)}
>
Sort by
</Button>
<Menu
value=""
// onChange={onSortMethod} <-- How to do this? ⚠
{...bindMenu(popupState)}
>
<MenuItem
onClick={popupState.close}
value={() => sortHighestSummerTemp}
>
☀️ Hottest summers
</MenuItem>
<MenuItem
onClick={popupState.close}
value={() => sortLowestWinterTemp}
>
🥶 Coldest winters
</MenuItem>
<MenuItem onClick={popupState.close} value={() => sortMostHotDays}>
🥵 Most hot days
</MenuItem>
</Menu>
</React.Fragment>
)}
</PopupState>
</FormControl>;
I would be blessed if you could explain how to achieve a similar effect with the Menu component!
Thank you for reading.
I think you should do that per MenuItem (at the onClick property). The Menu itself doesn't have that kind of property: Material-UI page
Secondly, I don't like value as a function. I think you can just pass the variable (sortHighestSummerTemp or sortLowestWinterTemp) to a state. React page reference
I'm trying to use a select, and I'm using the material-ui example
When I use the change() I don't get the value. Any suggestions?
<TextField
select
name={load.loadDetail.loadType}
variant="outlined"
label="Load Type"
value={load.loadDetail.loadType}
margin="normal"
fullWidth
onChange={handleChange}
>
<MenuItem>
<em>Refrigerated</em>
</MenuItem>
<MenuItem>
<em>Dry Product</em>
</MenuItem>
<MenuItem>
<em>Power Only</em>
</MenuItem>
</TextField>
The SelectField component in Material UI v1 is currently work in progress. You can see the current progress
import Select from '#material-ui/core/Select';
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: 'age',
id: 'age-simple',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
You have the option to use either TextField or Select(as suggested above), the issue with your code is that your MenuItem component has no value property.
e.g.
<MenuItem key="refrigerated" value="Refrigerated">
<em>Refrigerated</em>
</MenuItem>
I was using plain HTML for using select tag of html. Now, I'm trying to replace the HTML part by react-bootstrap. I have every thing similar except react-bootstrap tags but, I am getting undefined whenever I'm using <ButtonGroup> of react-bootstrap instead of select tag of plain HTML.
This is working:
<select onChange={this.groupBySelector}>
<option value="invoice">GROUP BY INVOICE</option>
<option value="customer">GROUP BY CUSTOMER</option>
<option value="month">GROUP BY MONTH</option>
</select>
This is not working:
<ButtonGroup>
<DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={this.groupBySelector}>
<MenuItem value="invoice">GROUP BY INVOICE</MenuItem>
<MenuItem value="customer">GROUP BY CUSTOMER</MenuItem>
<MenuItem value="month">GROUP BY MONTH</MenuItem>
</DropdownButton>
</ButtonGroup>
groupBySelector function is as follows:
groupBySelector(event){
console.log(event);
if ((event.target.value)==="invoice"){
this.setState({invoiceType:'invoice'})
} else if ((event.target.value)==="customer") {
this.setState({invoiceType:'customer'})
} else if ((event.target.value)==="month") {
this.setState({invoiceType:'month'})
} else {
this.setState({invoiceType:'invoice'})
}
}
Try to use arrow function to add event:
<DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={(eventKey, event) => this.groupBySelector(event)}>...
Looking at react-bootstrap's docs, the onSelect event for DropdownButton does not return an event (just like select).
Instead, you need to attribute an eventKey to each MenuItem component.
groupBySelector(eventOrKey){
this.setState({
invoiceType: eventOrKey.target ? eventOrKey.target.value : eventOrKey
})
}
render() {
return (
<DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={this.groupBySelector}>
<MenuItem eventKey="invoice">GROUP BY INVOICE</MenuItem>
<MenuItem eventKey="customer">GROUP BY CUSTOMER</MenuItem>
<MenuItem eventKey="month">GROUP BY MONTH</MenuItem>
</DropdownButton>
)
}
If you want to bind the event through arrow function (although not recommended):
render() {
return (
<DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={eventKey => this.setState({ invoiceType: eventKey })}>
<MenuItem eventKey="invoice">GROUP BY INVOICE</MenuItem>
<MenuItem eventKey="customer">GROUP BY CUSTOMER</MenuItem>
<MenuItem eventKey="month">GROUP BY MONTH</MenuItem>
</DropdownButton>
)
}
I'm trying to add a glyphicon to a NavDropdown in React Bootstrap.
I know that you can add it to a normal Dropdown like this, as explained in the documentation.
<Dropdown id="dropdown-custom-1">
<Dropdown.Toggle>
<Glyphicon glyph="star" />
Pow! Zoom!
</Dropdown.Toggle>
<Dropdown.Menu >
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
</Dropdown.Menu>
</Dropdown>
What I've tried:
1. Does not work:
<NavDropdown eventKey={3} id="basic-nav-dropdown">
<NavDropdown.Toggle>
<Glyphicon glyph="star" />
Pow! Zoom!
</NavDropdown.Toggle>
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
2. Does not work:
<NavDropdown eventKey={3} title={<Glyphicon glyph="star" /> Dropdown} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
3. Does work but the caret is not aligned with the text and it appears in a new line:
<NavDropdown eventKey={3} title={<div><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
You can try to pass a title through the <Glyphicon /> component like this:
render() {
const navDropdownTitle = (<Glyphicon glyph="star"> Dropdown </Glyphicon>);
return (
<NavDropdown title={navDropdownTitle} eventKey={3} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
)
}
(Update) Or we can use your approach but with small fix for div style. The font style does not break down in this case.
<NavDropdown eventKey={3} title={<div style={{display: "inline-block"}}><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
And you probably will need to disable text-decoration: underline style to make drop-down look better.
For example with this css-rule:
a.dropdown-toggle {
text-decoration: none;
}
<NavDropdown title={<BsPersonCircle />} id="collasible-nav-dropdown">
...
</NavDropdown>