I'm kinda new to ReactJs, I'm trying to disable a button in my app when that button is pressed. I have a function called "disableButtonEG" but it does nothing when I pressed it.
function disableButtonEG= () => {
button.disabled = true
};
<Button
title="Press to disable"
buttonStyle={{backgroundColor: PrimaryColor, borderRadius: 10}}
titleStyle={{fontSize:13}}
onPress={disableButtonEG}
/>
Any assist is appreciated
Try this,
function App() {
const [disable, setDisable] = React.useState(false);
return (
<button disabled={disable} onClick={() => setDisable(true)}>
Click me!
</button>
);
}
Buttons have a disabled attribute, you can set this to true or false to disable the button. You should also be using onClick instead of onPress.
Here is an example of one way to achieve what you are trying to do in ReactJS
import React from "react";
function App() {
const [disable, setDisable] = React.useState(false);
return (
<button disabled={disable} onClick={() => setDisable(true)}>
Disable Button
</button>
);
}
export default App
EDIT: Disable via function
import React from "react";
function App() {
const [disable, setDisable] = React.useState(false);
function disableButton() {
setDisable(true)
}
return (
<button disabled={disable} onClick={disableButton}>
Disable Button
</button>
);
}
export default App
I don't think onPress handler exists in button.
Please try with onMouseDown instead of onPress
Looks like you wrote the function syntax wrong. If you are still having problems after fixing it, You can use state. For example, I have a disabled state which has an initial value of false
const [disabled, setDisabled] = useState(false);
And a function that will change it to true
const disableButtonEG = () => {
setDisabled(true);
};
Then modify the Button component like this
<Button
title="Press to disable"
buttonStyle={{ backgroundColor: PrimaryColor, borderRadius: 10 }}
titleStyle={{ fontSize: 13 }}
disabled={disabled}
onPress={disableButtonEG}
/>
Related
I want this popper to show when the "copy link" button is clicked to let the user know that it has been copied, but then disappear on its own after a second or two. Here is the code for the popper
import * as React from 'react';
import Box from '#mui/material/Box';
import Popper from '#mui/material/Popper';
export default function SimplePopper() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick}>
Copy Link
</button>
<Popper id={id} open={open} anchorEl={anchorEl}>
<Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
Link Copied
</Box>
</Popper>
</div>
);
}
You might be able to do something with setTimeout in handleClick.
Try modifying handleClick like so:
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
setTimeout(() => setAnchorEl(null), 3000);
};
To expand the visual, I need to pass the Onclick function to antd Expand icon(shown below).
const showModal = () => {
setIsModalOpen(true);
};
const handleOk = () => {
setIsModalOpen(false);
};
const handleCancel = () => {
setIsModalOpen(false);
};
This is how i passed it to normal button currently.
<div className="expandButton">
<button
type="button"
className="fullScreenButton"
onClick={showModal}
>
Click
</button>
</div>
Instead of this way can i pass the onclick function directly to react antd icon?
Current antd icon.
<div>
<ExpandAltOutlined style={{ fontSize: "150%" }} />
</div>
Simply add an onClick event
<ExpandAltOutlined style={{ fontSize: "150%" }} onClick={()=>console.log('hj')} />
I have two buttons. I can change its color by clicking on one button. And when you click on another button, change its color as well, and return the old color to the first button. Something like toggle. How can I implement such functionality in a react applicatio.
const [toggle, setToggle] = useState(false);
const toggleIt = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={toggleIt}>Button1</button>
<button onClick={toggleIt}>Button2</button>
)
somthing like this (codesandbox),
import classNames from "classnames";
import { useCallback, useState } from "react";
import "./styles.css";
export default function App() {
const [toggle, setToggle] = useState(false);
const toggleIt = useCallback(() => {
setToggle((toggle) => !toggle);
}, []);
return (
<div>
<button
onClick={toggleIt}
className={classNames({
"btn-act": toggle
})}
>
Btn A
</button>
<button
onClick={toggleIt}
className={classNames({
"btn-act": !toggle
})}
>
Btn B
</button>
</div>
);
}
const [toggle, setToggle] = useState(false);
const toggleIt = () => {
setToggle(!toggle);
};
return (
<div>
<button onClick={toggleIt} style={toggle ? {color: "blue"} : {color: "red"}}</button>
<button onClick={toggleIt} style={toggle ? {color: "pink"} : {color: "purple"}}</button>
</div>
)
Background
You can use the useEffect() hook to accomplish this feature depending on the button pressed. Just hold two states and flip them each time a different button is pressed, and with those two states you can use two separate functions to handle the onClick()'s.
The useEffect() hook automatically re-renders the component once any of the items in the dependency array at the end change, which will happen depending on the button pressed.
You can also directly set true/false values on your state variables with the second value that returns from useState(), and those state variables will automatically have their states updated without you manually assigning them.
There is very likely a better, more efficient way of doing it, but this is just a general guideline, if you will.
This is the code
const [toggleOne, setToggleOne] = useState(false);
const [toggleTwo, setToggleTwo] = useState(true);
const toggleFirst = () => {
setToggleOne(true);
setToggleTwo(false);
};
const toggleSecond = () => {
setToggleOne(false);
setToggleTwo(true);
};
useEffect(() => {
if (toggleOne) {
// Do something with first button pressed
} else if (toggleTwo) {
// Do something with second button pressed
}
}, [toggleOne, toggleTwo]);
return (
<div>
<button onClick={toggleFirst}>Button1</button>
<button onClick={toggleSecond}>Button2</button>
</div>
);
The first button:
const [open, setOpen] = useState(false);
return (
<>
<SideCart open={open} />
<CartButton open={open} onClick={() => setOpen(!open)}>
)
</>
The sidebar:
const [hide, setHide] = useState(open ? true : true);
return (
<SidecartContainer open={open} hide={hide}>
// Thats the second button
// I want to close the sidebar component with this button
<ExitButton hide={hide} onClick={() => setHide(!hide)}>
</SidecartContainer>
const SidecartContainer = styled.div`
transform: ${({ open, hide }) =>
open && hide ? "translateX(0)" : "translateX(100%)"};
`;
I have one button triggering the Open state of sidebar and when it opens I have an x button to close the sidebar.
It only works once.
What shall I use so whenever I click the open button to open and then when I click on close to hide?
It's made with styled-components.
I think your problem is that this line const [hide, setHide] = useState(open ? true : true); only runs once on component mount. What you need is a useEffect in the sidebar to listen for changes to open and apply them to the hide state like so:
const [hide, setHide] = useState(open ? true : true);
useEffect(() => {
setHide(!open);
}, [open]);
return (
<SidecartContainer open={open} hide={hide}>
--------Thats the second button
--------I want to close the sidebar component with this button
<ExitButton hide={hide} onClick={() => setHide(!hide)}>
</SidecartContainer>
I finally found what's the right way to do it and it works.
First I declared outside of the sidebar the useStates logic:
const [open, setOpen] = useState("");
const hide = () => setOpen("translateX(100%)");
const show = () => setOpen("translateX(0)");
then I passed the props to Sidecart.js:
const SideCart = (props) => {
return (
<SidecartContainer transform={props.transform} open={props.open}>
<ExitButton open={props.open} onClick={props.onClick}>
<CloseIcon />
</ExitButton>
<ProductCards>
<CartProductCard />
</ProductCards>
<Total></Total>
</SidecartContainer>
);
};
also this is important, in the styled component css I declared the prop value:
const SidecartContainer = styled.div`
transform: ${(props) => props.transform};
`;
Finally I changed the onClick functions accordingly:
<SideCart transform={open} open={open} onClick={hide} />
<CartButton open={open} onClick={show}>
I am trying to use Reactstrap 8.5.1 innerRef attribute along with useRef() to focus the Input within a Modal whenever the Modal opens. The code below shows the Button which opens the Modal, but when clicked I get the error "Cannot read property 'focus' of null". It also writes inputRef to the console, which shows that .current is null.
I've tried various ways to set innerRef, but nothing seems to work. I'd be very grateful if someone can point out to me what I am missing.
import React, { useState, useRef, useEffect } from 'react';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Input } from 'reactstrap';
export const ModalSave = (props) => {
const [modalIsOpen, setModalIsOpen] = useState(false);
const toggle = () => setModalIsOpen(!modalIsOpen);
const inputRef = useRef(null);
useEffect(() => {
console.log(inputRef);
if (modalIsOpen === true) {
inputRef.current.focus();
}
}, [modalIsOpen]);
return (
<div>
<Button
onClick={() => { setModalIsOpen(true); }}
>Save</Button>
<Modal isOpen={modalIsOpen} toggle={toggle}>
<ModalHeader toggle={toggle}>Save</ModalHeader>
<ModalBody>
Name:
<Input
innerRef={inputRef.current}
/>
</ModalBody>
<ModalFooter>
<Button>Save</Button>
<Button onClick={toggle}>Close</Button>
</ModalFooter>
</Modal>
</div>
);
}
The issue is that opening the modal doesn't trigger the component to re-render which is needed to get the input ref value, and so, the ref will remain null unless some state is called to trigger the re-render. As a workaround, you can use setTimeout() method to kind of force it like so:
useEffect(() => {
if (modalIsOpen) {
setTimeout(() => inputRef.current.focus(), 0);
}
}, [modalIsOpen]);
A better solution is to use the onOpened method which is called after the modal has opened:
export default function App() {
const inputRef = useRef(null);
const [modalIsOpen, setModalIsOpen] = useState(false);
const toggle = () => setModalIsOpen(!modalIsOpen);
const handleOpen = () => inputRef.current.focus();
return (
<div className="App">
<div>
<Button onClick={() => setModalIsOpen(true)}>Save</Button>
<Modal isOpen={modalIsOpen} toggle={toggle} onOpened={handleOpen}>
<ModalHeader toggle={toggle}>Save</ModalHeader>
<ModalBody>
Name:
<Input innerRef={inputRef} />
</ModalBody>
<ModalFooter>
<Button>Save</Button>
<Button onClick={toggle}>Close</Button>
</ModalFooter>
</Modal>
</div>
</div>
);
}