I am currently working with javascript/React and I have some problems with the last one.
In my window, I have several buttons, and below, a dropdown list. The idea is to disable this dropdown list. It is only enabled once you click a button, based on the disabled parameter. Among the button parameters, there is also a onClick() which does something else (but at the beginning of this function, I implemented some code so that the value in disabled would change). Which is why I want to use the disabled parameter to enable/disable the dropdown list.
So this is supposed to be easy...
Here is a part of the html :
<DropdownButton
title={"Type : "}
className="sequence-dropdown"
disabled={true}
key="sequence-dropdown"
id="sequence-dropdown"
>
<MenuItem onClick={() => this.changeValue(value1)}>Value 1</MenuItem>
<MenuItem onClick={() => this.changeValue(value2)}>Value 2</MenuItem>
<MenuItem onClick={() => this.changeValue(value3)}>Value 3</MenuItem>
</DropdownButton>
And here is the code supposed to enable the dropdown list, contained in the function changeValue().
var statusDropdown = document.getElementById('sequence-dropdown').disabled;
if (statusDropdown === true) {
console.log(document.getElementById('sequence-dropdown').disabled)
document.getElementById('sequence-dropdown').disabled = false;
console.log(document.getElementById('sequence-dropdown').disabled)
}
else if (statusDropdown === false) {
//console.log(statusDropdownMapType)
document.getElementById('sequence-dropdown').disabled = true;
//console.log(statusDropdownMapType)
}
I did not try it, but I think I could simply use :
document.getElementById('sequence-dropdown').disabled = !document.getElementById('sequence-dropdown').disabled
But that's not the issue here.
My problem is : the button is well disabled at the beginning (with some grey color indicator). When I click a button, the grey color disappears, the component style is normal, and the disabled parameter is well changed.
BUT when I click on the dropdown, the list does not appear... It is like I was just clicking a button, nothing happens...
Does anyone know why ?
I think you should use
document.getElementById('sequence-dropdown').setAttribute("disabled","disabled");
and
document.getElementById('sequence-dropdown').removeAttribute("disabled");
regards Halliballi
If you set disabled={true} everytime the component renders it will be disabled. I would use another approach, like this:
constructor() {
super();
this.state = {disabled: true};
}
...
render () {
const {disabled} = this.state;
return (
<DropdownButton
title={"Type : "}
className="sequence-dropdown"
disabled={disabled}
key="sequence-dropdown"
id="sequence-dropdown">
<MenuItem onClick={() => this.changeValue(value1)}>Value 1</MenuItem>
<MenuItem onClick={() => this.changeValue(value2)}>Value 2</MenuItem>
<MenuItem onClick={() => this.changeValue(value3)}>Value 3</MenuItem>
</DropdownButton>
);
}
Then, since I can see you only change the state from disabled to enabled and viceversa, when you click your button this would be the approach:
this.setState((oldState) => {
return {disabled: !oldState.disabled};
});
This way is more React. Hope it helps.
Related
I need simple functionality: show Button when value is more than 0. And for this I use code below.
I created some Text Fields with similar states (4) and I don't understand why only in 3rd this didn't work.
My code:
export default function TextFields() {
...
const [showButton3, setShowButton3] = useState("");
...
const handleChange = (event) => {
setShowButton3(event.target.value);
console.log("value is:", event.target.value);
};
return (
<InputOutlined
type={"text"}
id={"text3"}
name={"text3"}
value={showButton3}
onChange={handleChange}
leftElement={
<Img
width={36}
height={36}
radius={12}
src={
"https://images.unsplash.com/photo-1665174271625-178021f8b1a5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
}
/>
}
rightElement={
showButton3 ? (
<IconButton
icon={<MdClose size={24} />}
variant={"surface"}
type="reset"
onClick={() => setShowButton3("")}
></IconButton>
) : null
}
>
Your name
</InputOutlined>
)}
I have checked Component, here I add some text
And when I want to clear value, I get this
You can see, value is cleared. But I still see it in my input. How to fix that? Or maybe I doing something wrong?
Proof:
This is very similar Components. I changed id, but I don't understand why value isn't removed. Maybe I need to use useRef or useId. But I have 4 different inputs and only 1 have this issue.
I'm React beginner, here i'm using material ui select element, 'selectPolygon' comes when i click a polygon then it changes select value to it.
When user comes to the page and nothing clicked yet, select element value is 'Polygo'.
Select value can be changed either from dropdown or clicking a polygon, but when user changes select value from dropdown and after it clicks a polygon it wont change select value, why ?
English is not my mother language so could be mistakes.
import {Select, MenuItem,} from "#material-ui/core";
const [change, setChange] = useState("") ;
const handleChange = (event) => {
setChange(event.target.value);
};
<Select
value={change}
renderValue={
change
? undefined
: () => (
<div className={classes.placeholder}>
{" "}
{selectPolygon ? selectPolygon : "Polygo"}
</div>
)
}
onChange={handleChange}
>
{graph?.links?.map((option: any) => {
return (
<MenuItem
className={classes.menuItemm}
key={option.id}
value={option}
>
{
graph?.nodes.find(
(id: any) => id?.id === option?.target
)?.name
}
</MenuItem>
);
})}
</Select>
I'm using the new NEXTUI navbar: https://nextui.org/docs/components/navbar
I want to set isActive property on the active link and there isn't much help to get from Google so I hope someone here have used it or knows how to do so. I'm using Next.js
A portion of the code:
<Navbar.Content
enableCursorHighlight
activeColor="primary"
hideIn="xs"
variant="highlight-rounded"
>
{navigation.map((item, index) => (
<Navbar.Link key={index} href={item.link}>
{item.title}
</Navbar.Link>
))}
</Navbar.Content>
EDIT: When I add isActive in the map loop, it effects all. I want to set isActiveon the clicked (active link) one at a time. If I didn't loop my nav links (which is coming from backend) I could set IsActive property on one but then its just that one that have isActive even if I click on other links.
You have to use a specific condition in your map to check if you are on the correct route.
For example: you can use the next/router and compare it to the link property of the item.
const { asPath } = useRouter();
.
.
.
//inside return body
....
{navigation.map((item, index) => {
if(asPath === item.link)
return(<Navbar.Link isActive key={index} href={item.link}>
{item.title}
</Navbar.Link>);
});
else
return(<Navbar.Lin key={index} href=. {item.link}>
{item.title}
</Navbar.Link>);
})
}
similar to the answer above but without the if/else in the return
{navigation.map((item, index) => (
<Navbar.Link
isActive={asPath === item.link}
key={index}
href={item.link}
>
{item.title}
</Navbar.Link>);
))}
I'm using antdselect for implementing multi-select components.
Ant select has a property called mode="multiple"
I want to clear all selected input on the multi-select component when a clear call button is pressed.
Is there any property for antd select to clear all selection done?
You can use allowClear property of Select, which will add a clear icon on hovering the select box.
If you need to implement a clearing button, you need to do it by yourself, for example:
const N = 30;
const children = [...Array(N).keys()].map(key => (
<Select.Option key={key}>{key}</Select.Option>
));
export default function App() {
const [selectedValues, setSelectedValues] = useState([]);
return (
<FlexBox>
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
allowClear
value={selectedValues}
onChange={e => setSelectedValues(e)}
>
{children}
</Select>
<Button type="danger" onClick={() => setSelectedValues([])}>
Clear Selected
</Button>
</FlexBox>
);
}
Ive got some standard mapping going on.
{MEMBERSHIPS.map((mItem, index) => (
<TableCell
className="text-uppercase text-center"
colSpan={2}
padding="dense"
value={mItem.label}
key={mItem.key}
>
<Button onClick={this.handleClickOpen}>{mItem.label}</Button>
<Dialog
disableBackdropClick
disableEscapeKeyDown
open={this.state.open}
onClose={this.handleClose}
>
<DialogTitle>
Choose bulk edit {mItem.label} status
</DialogTitle>
...
The value of {mItem.label} is correctly pulling through the headers, but if I use that key again within the mapping staetment it brings back the last item in the array... I would expect {mItem.label} to be the same wherever its used.
https://codesandbox.io/s/kxrk5mnqjr
If you go to the above codesandbox... click on a heading of either seniors, Juniors or Infants - this is a button
<Button onClick={this.handleClickOpen}>{mItem.label}</Button>
It opens up a dialog where I want to use the heading value again {mItem.label} but the result is different from the header display. e.g. If I clicked the Seniors button I would expect the Seniors dialog text however it comes back with "infants" in all instances.
The main problem is that you are using the same state value to open/close all the dialogs this.state.open. So when you click on one button, all 3 dialogs are opened, and you see the last one which is on top.
To fix this :
handleClickOpen = value => {
this.setState({ [`open${value}`]: true });
};
handleClose = value => {
this.setState({ [`open${value}`]: false });
};
And
<Button
onClick={this.handleClickOpen.bind(this, mItem.value)}
>
{mItem.label}
</Button>
<Dialog
disableBackdropClick
disableEscapeKeyDown
open={this.state[`open${mItem.value}`]}
onClose={this.handleClose.bind(this, mItem.value)}
>
...
Complete code https://codesandbox.io/s/pm0ovrvl97