How do I change my cursor to be an icon when I click a button and then place that icon down on the second click, and become a regular cursor again? I'm working in React. All I have is that when I button is clicked, the global boolean clicked is turned to true.
Is this useful for what you need?
const [cursor, setCursor] = useState('crosshair');
const changeCursor = () => {
setCursor(prevState => {
if(prevState === 'crosshair'){
return 'pointer';
}
return 'crosshair';
});
}
return (
<div className="App" style={{ cursor: cursor }}>
<h2>Click to change mouse cursor</h2>
<input type="button" value="Change cursor"
onClick={changeCursor}
style={{ cursor: cursor }}
/>
</div>
);
Related
Two buttons are rendered in my button component. Depending on the label, the button receives the class addButton or clearButton.
Button Component:
import './Button.css'
interface ButtonProps {
lable: string,
disabled: boolean,
onClick: MouseEventHandler<HTMLButtonElement>
}
export const Button: FunctionComponent<ButtonProps> = ({ lable, disabled, onClick}): ReactElement => {
let style: string = lable == 'ADD' ? 'addButton' : 'clearButton';
console.log(lable);
console.log(style);
return(
<div>
<button className= {`button ${style}`} type='button' disabled= { disabled } onClick= { onClick }>
{lable}
</button>
</div>
);
}
In the stylesheet Button.css are the two classes addButton and clearButton. Strangely, only the style class that is in second place is loaded. In this situation, the addButton receives its colour and the clearButton remains colourless. If I place the style class of the clearButton in second place in the stylesheet, it receives its colour and the addButton remains colourless.
Button.css
.clearButton {
background-color: #8c00ff;
}
.addButton {
background-color: #7ce0ff;
}
If I outsource both style classes to separate stylesheets, it works but this is not an elegant solution.
I would also like to understand the problem
I've execute your code, and it works, I think the problem is where you call the button you are not passing props to
change import type of button style
import styles from './Button.css';
return(
<div>
<button className={`button ${label === 'ADD' ? styles.addButton : styles.clearButton}`}>
{lable}
</button>
</div>
);
and reolace background-color to background
.clearButton {
background: #8c00ff;
}
.addButton {
background: #7ce0ff;
}
you can test code in this codesandbox project
I am using a Material UI button for my TODO react app. I just want my form to have a input field with submit button, but I want my submit Button to invisible so that user have a feeling that my form submits on clicking "Return" key.
import { TextField, Button } from '#material-ui/core';
<form>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {
setTodoInput(e.target.value);
}} />
<Button
type="submit"
variant="contained"
onClick={addToDo}
className="buttonDisplay">
Display
</Button>
</form>
I added display: none; to my css still it does not disappears.
.buttonDisplay{
display: none;
}
Can someone tell me what is the issue with it.
If are looking for a way to submit form without a button, take a look at this.
export default function App() {
const [todoInput, setTodoInput] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
alert(todoInput);
};
return (
<form
onSubmit={(e) => {
handleSubmit(e);
}}
>
<TextField
id="standard-basic"
label="Write a Todo"
variant="standard"
className="textField"
value={todoInput}
onChange={(e) => {setTodoInput(e.target.value)}}
/>
</form>
);
}
onSubmit will be triggered when you press 'return' key
sandbox : https://codesandbox.io/s/polished-bush-uzi6e?file=/src/App.js
You can use different method to hide a button using CSS :
modify the opacity parameter
adjust the alpha color parameter
or just change the visibility aspect of your button
Here is a link that might help you using these elements :
Ways to hide elements in CSS
I have a login page where I set border colors on focus and I want to keep the focus even when I'm clicking my eye password toggleI have attached a gif that shows how I loose my focus state when toggling my eye
One way to do it is to store a ref to the password input field, and call focus() on it in the eye's onClick handler:
import React, { useRef } from "react";
const Eye = ({ onClick }) => <span onClick={onClick}>eye</span>;
export default function App() {
const inputRef = useRef();
const handleEyeClick = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input ref={inputRef} type="text" />
<Eye onClick={handleEyeClick} />
</div>
);
}
I have a react function which returns a button.
<div className="col-6 btn-group btn-group w-100">
<AuditMenuButtons buttonValue='Pending' buttonName='Inbox' changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
<AuditMenuButtons buttonValue='Rejected' buttonName='Rejected' changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
<AuditMenuButtons buttonValue='Accepted' buttonName='Accepted' changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
</div>
Function is added below
function AuditMenuButtons(props) {
return(
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton}><img src={props.icon} className="pr-3 menu-btn-icons">
</img>{props.buttonName}</button>
);
}
You will see 3 buttons in above code. I want to change the button icon when one button is clicked. actually button icon color should be green when button is clicked. Images are .png file (with green and silver border). I tried button:active in css it didn't work for me. Image should remain until I clicked another button or page was refreshed
In this case, the icon part is a UI state, it has to maintained in your state and passed down to AuditMenuButtons has props.
use these props in AuditMenuButtons to do the desired check.
import React,{Component} from 'react';
class demoComponent extends from Component{
this.state={
isClicked:false,
buttonIcons:{
pending:{active_Icon:"../IconURL",Icon:"../IconURL"},
rejected:{active_Icon:"../IconURL",Icon:"../IconURL"},
accepted:{active_Icon:"../IconURL",Icon:"../IconURL"}
}
}
clickHandler = (event) =>{
this.setState(
{
isClicked:!this.state.isClicked // this is gonna toggle everytime you click //
}
);
}
render(){
return <div className="col-6 btn-group btn-group w-100">
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Pending' buttonName='Inbox' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_inbox}/>
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Rejected' buttonName='Rejected' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_rejected}/>
<AuditMenuButtons clickhandler={this.clickHandler} buttonValue='Accepted' buttonName='Accepted' isClicked={this.state.isClicked} buttonIcons={this.state.buttonIcons} changeFilterForButton={this.props.changeFilterForButton} icon={icon_accepted}/>
</div>
}
}
export default demoComponent;
You can try something like this in your .css file.
.button:focus{background: url('your new green image');
You can manage the image path in react state and call a method attach
it to onClick, where you use setState() and update the state.
Refer
https://reactjs.org/docs/handling-events.html
https://reactjs.org/docs/react-component.html#setstate
this.state = {
image_path: 'your image url here'
}
changeUrl = () => {
this.setState({image_path:'new path'});
}
<AuditMenuButtons onClick={this.changeUrl} src={this.state.image_path}/>
You can try with this:
changeFilterForButton: function (props) {
props.currentTarget.style.backgroundColor = '#ccc';
}
function AuditMenuButtons(props) {
return(
<button className="w-25 btn menu-btn p-lg-3" name={this.props.buttonName}
value={this.props.buttonValue} onClick={this.props.changeFilterForButton}><img src={this.props.icon} className="pr-3 menu-btn-icons">
</img>{this.props.buttonName}</button>
);
}
or if you want to use react methodology then you can use construtor like this
constructor(props) {
super(props);
this.state = {isColor: false};
// This binding is necessary to make `this` work in the callback
this.changeFilterForButton= this.changeFilterForButton.bind(this);
}
changeFilterForButton() {
this.setState(state => ({
isColor: !state.isColor
}));
}
function AuditMenuButtons(props) {
return (
<button className="w-25 btn menu-btn p-lg-3" name={props.buttonName} value={props.buttonValue} onClick={props.changeFilterForButton} style="background-color: {this.state.isColor? '#CCC' : ''} "><img src={props.icon} className="pr-3 menu-btn-icons">
</img>{props.buttonName}</button>
);
}
This is what i'm trying to do https://react-bootstrap.github.io/components.html#btn-groups but when I click on one of the buttons I want another function to be called
<ButtonGroup>
<Button onClick = {this.onSubmit.bind(this,1)} key={1} active = {this.state.i == 1}>LEFT</Button>
<Button onClick = {this.onSubmit.bind(this,2)} key={2} active = {this.state.i == 2}>MIDDLE</Button>
<Button onClick = {this.onSubmit.bind(this,3)} key={3} active = {this.state.i == 3}>RIGHT</Button>
</ButtonGroup>
onSubmit(new_i: number) {
this.setState({
i: new_i
});
}
I want only one button to be active at a time, the one I click on.
The default value of i is 1. So when I start the program the LEFT button is active and the 2 others are not, which is what I want. But after I cannot click on the other buttons because the value is always 1. And finally my question is how can I change the value on I only the I click on a button.
I would suggest if you're trying to make a item active by changing it CSS or adding a CSS class showing it's active you do something like so, this is a basic example showing that a style is being applied to an element based on the state of i.
https://jsfiddle.net/chrshawkes/64eef3xm/
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
var Hello = React.createClass({
getInitialState: function () {
return { i: 1 }
},
onSubmit: function (value) {
this.setState({ i: value })
},
render: function() {
return (
<div>
<div onClick = {this.onSubmit.bind(this,1)} key={1} style = {this.state.i == 1 ? {color: "red"} : {color: "blue"}}>LEFT</div>
<div onClick = {this.onSubmit.bind(this,2)} key={2} style = {this.state.i == 2 ? {color: "red"} : {color: "blue"}}>MIDDLE</div>
<div onClick = {this.onSubmit.bind(this,3)} key={3} style = {this.state.i == 3 ? {color: "red"} : {color: "blue"}}>RIGHT</div>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);