<Menu tabular>
{
menus.map((menu, index) => (
<Menu.Item
key={index}
name={menu.name}
active={this.props.location.pathname === menu.path}
onClick={() => {this.props.handleOpenClick(menu)}}
>
{menu.name}
<Button onClick={() => {this.props.handleCloseClick(index)}}>X</Button>
</Menu.Item>
))
}
</Menu>
I want to create a dynamic tabular layout with closable feature by using Menu and tabular option. I put the Button component inside a Menu.Item and implement the onClick event.
When the buton is clicked, it's also calling handleOpenClick() function on the Menu.Item component. I need to call the handleCloseClick() only.
Is there any suggestion ?
Sorry for my bad english
Try adding e.stopPropagation().
<Menu tabular>
{
menus.map((menu, index) => (
<Menu.Item
key={index}
name={menu.name}
active={this.props.location.pathname === menu.path}
onClick={() => {this.props.handleOpenClick(menu)}}
>
{menu.name}
<Button onClick={e => {
e.stopPropagation();
this.props.handleCloseClick(index);
}}>X</Button>
</Menu.Item>
))
}
</Menu>
Related
I'm new to React and JSX. I'm building a button when clicked opens a dialog box with a table inside it (1x3) which has name, status, & exception error as "strings".
For some reason, when I click the button, I can see the console.log() statement in my console being shown, but nothing shows up as a pop-up dialog box (so, anything and everything inside the return() statement).
const isFailed = () => {
console.log(testCase["test-method"][0].status);
//alert(testCase["test-method"][0].exception);
return(
<Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}>
<DialogTitle>{testCase.name} Summary</DialogTitle>
<DialogContent>
<Table>
{steps.map((val) => (
<TableRow key={val.name}>
<TableCell>{val.name}</TableCell>
<TableCell>{val.status}</TableCell>
<TableCell>{val.exception}</TableCell>
</TableRow>
))}
</Table>
</DialogContent>
</Dialog>
);
}
EDIT: isFailed function is called by the onClick Button handler
const steps = testCase["test-method"];
return (
<>
<TableRow key={key} style={{ cursor: "pointer" }} onClick={() => setOpen(true)}>
<TableCell>{testCase.name}</TableCell>
<TableCell>{testCase.duration}</TableCell>
<StatusCell fail={testCase.fail} skip={testCase.skip} />
<TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell>
</TableRow>
</>
);
If someone can help me with this, it will be awesome. Thanks.
You can't use return method inside a onClick function.
You might need to maintain a separate state to handle the onclick function.
const steps = testCase["test-method"];
return (
<>
<TableRow key={key} style={{ cursor: "pointer" }} onClick={()
=> setOpen(true)}>
<TableCell>{testCase.name}</TableCell>
<TableCell>{testCase.duration}</TableCell>
<StatusCell fail={testCase.fail} skip={testCase.skip} />
<TableCell>{(typeof(testCase["test-method"][0].exception) == typeof("string")) ? <div> <Button onClick = {isFailed} color = "primary">View Error</Button> </div>: null}</TableCell>
</TableRow>
</>
{isClicked &&
<Dialog maxWidth="xl" open={open} onClose={() => setOpen(false)}>
<DialogTitle>{testCase.name} Summary</DialogTitle>
<DialogContent>
<Table>
{steps.map((val) => (
<TableRow key={val.name}>
<TableCell>{val.name}</TableCell>
<TableCell>{val.status}</TableCell>
<TableCell>{val.exception}</TableCell>
</TableRow>
))}
</Table>
</DialogContent>
</Dialog>
}
);
On onClick function just set the boolean value of isClicked function.
const [isClicked, setIsClicked] = React.useState(false);
const isFailed = () => {
setIsClicked(true);
}
What I'm trying to do is get which is the key of the sider the user is using (without ReactDOM and with functional components)
my sample code here:
export default function DrawerSider() {
const history = useHistory();
const [selectedKey, setSelectedKey] = useState("sub1")
const handleSelectKey = function(key, history_string) {
setSelectedKey(key)
history.push(history_string)
console.log(key)
}
return (
<Sider width={200} className="site-layout-background">
<Menu
defaultSelectedKeys={selectedKey}
mode="inline"
style={{ height: "100%", borderRight: 0 }}
>
<Menu.Item
key="sub1"
icon={<HomeOutlined />}
onClick={() => handleSelectKey("sub1","/dashboard/resumo")}
>
Dashboard
</Menu.Item>
<SubMenu key="sub2" icon={<UserOutlined />} title="Usuários">
<Menu.Item
key="1"
icon={<PlusCircleOutlined />}
onClick={() => handleSelectKey("1","/usuarios/novo")}
>
Adicionar usúario
</Menu.Item>
<Menu.Item
key="2"
icon={<TableOutlined />}
onClick={() => handleSelectKey("2","/usuarios/todos")}
>
Todos usúarios
</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<FormOutlined />} title="Formulários">
<Menu.Item
key="3"
icon={<PlusCircleOutlined />}
onClick={() => handleSelectKey("3","/formularios/novo")}
>
Adicionar formulário
</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</Sider>
);
}
Obs: I'm using ant design lib
Someone knows how to make it works?
I tried to use a const on click event to set a state of the selected key , but it didn't work
There is no onClick on Menu.Item
only Menu component has onClick or onSelect, both will give you callback of the "clicked" key, the differences is onClick is for any menu item click (including expanding menu) while on select is when you select an actual menu item.
There are 2 ways to get the history string:
1 - use the history string as menuItem key:
the issue would be you cannot have 2 menu item that has same history key
2 - have a map which maps the menu key to history string
see below demo:
https://codesandbox.io/s/inline-menu-antd-4-18-2-forked-bgwyj?file=/index.js
const handleOnSelect = ({ item, key, keyPath, selectedKeys, domEvent }) => {
console.log(item);
console.log(keyPath);
console.log(selectedKeys);
console.log(domEvent);
handleSelectKey(key);
};
...
..
<Menu
onSelect={handleOnSelect}
...
>
...
</Menu>
You need to save the selected key as part of the component's state. You can set the current selected key as part of the onClick.
const selectedKey, setSelectedKey = useState("defaultSelectedKey")
Not sure what the useHistory hook is for but if you need to set that onClick as well as the selectedKey, move it all into one function like so
const handleSelectKey = function(key, history_string) {
setSelectedKey(key)
history.push(history_string)
}
...
onclick={() => handleSelectedKey("3", "/usuarios/novo")}
https://ant.design/components/menu/
EDIT
Based on research into your design library, your onclick and handle select must be at the top level of the menu component. Just copy the syntax that they use in their example code.
https://ant.design/components/menu/
folks
So my issue is simple. I want to provide custom closeIconButton. And only closeIcon prop is available.
CloseIcon prop doesn't suffice because I need this custom button to have onClick property.
And if I place onClick on CloseIcon material-ui will warn: Failed prop type: Material-UI: you are providing an onClick event listener to a child of a button element.
Firefox will never trigger the event.
<Autocomplete
open={open}
classes={classes}
options={practicesList}
getOptionLabel={get('name')}
value={curPractice}
blurOnSelect
closeIcon={<CloseIcon onClick={() => onChange(null)} />}
onChange={async (e, option) => {
if (!option) return
onChange(option.id)
}}
renderInput={params => <TextField {...params} autoFocus={autoFocus} fullWidth label={label} margin="none" />}
renderOption={(practice, { inputValue }) => {
const matches = match(practice.name, inputValue)
const letters = parse(practice.name, matches)
return (
<div>
{letters.map((letter, i) => (
<span key={i} style={{ fontWeight: letter.highlight ? 700 : 400 }}>
{letter.text}
</span>
))}
</div>
)
}}
/>
From api docs closeIcon should be just some node. For example:
<CloseIcon fontSize="small" />
Than, you can use onClose prop directly on Autocomplete component to specify some callback. Hope this helps.
Sorry for the horrible title, I couldn't for the life of me figure out how to word this problem. By default I want the first item in my list to be highlighted and others to be highlighted when the mouse is over them. This works fine and I was curious how I am able to remove the highlight of that initial item when another is highlighted, I know I need to handle the state within my parent component (List) but I cannot figure it out.
This is my list item that contains some basic state management to show whether the given item is highlighted or not.
export default function Item ({ title, onClick, selected, i }) {
const [highlight, setHighlight] = useState(false)
return (
<ListItem
i={i}
key={title}
selected={selected}
onClick={onClick}
onMouseEnter={() => setHighlight(true)}
onMouseLeave={() => setHighlight(false)}
// i === 0 && no other item is highlighted (need to get this state from the list component)
highlight={highlight || i === 0}
>
{title}
</ListItem>
)
}
Parent component that takes in a 'list' and maps each item in that list to the above component (Item):
export default function List ({ list, onClick, selected, render }) {s
return (
<div>
{render ? (
<ListContainer>
{list.map((item, i) => (
<Item
i={i}
key={item.title}
title={item.title}
onClick={() => onClick(item.title)}
selected={selected(item.title)}
/>
))}
</ListContainer>
) : null}
</div>
)
}
Here is a Gyazo link that shows the current implementation, what I want to achieve is for that initial item to no longer be highlighted when the mouse has entered another item where the index does not equal 0.
You need to lift your highlight state to parent List component
function List ({ list, onClick, selected, render }) {
const [highlightIndex, setHighlightIndex] = setState(0);
return (
<div>
{render ? (
<ListContainer>
{list.map((item, i) => (
<Item
i={i}
key={item.title}
title={item.title}
onClick={() => onClick(item.title)}
selected={selected(item.title)}
highlightIndex={highlightIndex}
setHighlightIndex={setHighlightIndex}
/>
))}
</ListContainer>
) : null}
</div>
)
}
function Item ({ title, onClick, selected, i, highlightIndex, setHighlightIndex }) {
return (
<ListItem
i={i}
key={title}
selected={selected}
onClick={onClick}
onMouseEnter={() => setHighlightIndex(i)}
highlight={i === highlightIndex}
>
{title}
</ListItem>
)
}
you can do it with css
ul:not(:hover) li:first-of-type,
ul li:hover {
background-color: red;
}
the first one will be highlighted while not hovered, and the other will be highlighted when hovered and "cancel" the first one.
Presuming the selected one will go to the top of the list.
Hi im new in react and i have been using react-datepicker but i got this problem, i made a custom button that when is clicked it should display the datepicker and well it does it, the problem is that it is trapped inside the menu of the button, and what i need is it to popout outside the menu (actually i need to close the menu when selected and just see the datepicker)
any kind of help would be apreciated
as you can see my datepicker is inside a menu
this is my menu and datepicker code
<Menu
className="main-toolbar__menu"
anchorEl={this.state.anchors.options_settings}
open={Boolean(this.state.anchors.options_settings)}
onClose={() => this.handleDropdownClose('options_settings')}
>
<MenuItem
onClick={() => {
this.toggleCalendar()
}}
>
<DatePicker
customInput={<ExampleCustomInput />}
selected={this.state.startDate}
onChange={this.handleChange}
/>
</MenuItem>
<MenuItem
onClick={() => {
this.handleModal('addNotificationModal', true)
this.handleDropdownClose('options_settings')
}}
>
<span>Notification Preferences</span>
</MenuItem>
</Menu>
You can Move your datepicker outside the Menu component and toggle it based on the toggle logic and a ternary expression.
state = {
showCalendar:false
}
toggleCalendar = () => {
this.setState({showCalendar:!this.state.showCalendar})
//or whatever logic you have for toggleCalendar already
}
{this.state.showCalendar ? <DatePicker
customInput={<ExampleCustomInput />}
selected={this.state.startDate}
onChange={this.handleChange}
/> : null }
<Menu
className="main-toolbar__menu"
anchorEl={this.state.anchors.options_settings}
open={Boolean(this.state.anchors.options_settings)}
onClose={() => this.handleDropdownClose('options_settings')}
>
<MenuItem
onClick={() => {
this.toggleCalendar()
}}
>
</MenuItem>
<MenuItem
onClick={() => {
this.handleModal('addNotificationModal', true)
this.handleDropdownClose('options_settings')
}}
>
<span>Notification Preferences</span>
</MenuItem>
</Menu>