Here, i am using onMouseOver event in react but it not works fine for me.
I use proper way how to use, call and set State.
Here is my code anyone please help.
import React from 'react';
const style = {
color:"black",
fontSize:16,
borderRadius:4,
border: "1px solid grey",
lineHeight: "28px",
background: "white",
padding: 3,
margin:3,
}
const highlightStyle = {
color:"black",
fontSize:16,
border: "1px solid grey",
background:"lightblue",
borderRadius:4,
lineHeight: "25px",
padding: 3,
margin:5
}
export default class SplitSpansPreview extends React.Component {
constructor(props){
super(props)
this.state = {
color_black: true,
hover: false
}
this.changeColor = this.changeColor.bind(this)
this.onHover = this.onHover.bind(this)
this.hoverOn = this.hoverOn.bind(this)
this.hoverOff = this.hoverOff.bind(this)
}
onHover() { alert("hello")
this.setState({ hover: true });
}
hoverOn(){alert("hcek")
// this.setState({ hover: true });
}
hoverOff(){ alert("kol")
// this.setState({ hover: false });
}
changeColor() {
const id = this.props.atId;
const self = this
this.setState({color_black: !this.state.color_black}, () => {
if(this.state.color_black){
self.props.getDisselectedId(id);
} else {
self.props.getSelectedId(id);
}
});
}
createMarkup(data) {
return {__html: data}
}
render(){
let checkBreak = this.props.item.substring(0,4)
if(checkBreak == '<br>' || checkBreak == ' <br') {
const itemLength = this.props.item.length
if(checkBreak == '<br>') {
var item = this.props.item.substring(4,itemLength)
} else {
var item = this.props.item.substring(5,itemLength)
}
if(this.props.punctuation) {
return(
<span>
<br/>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
onMouseOver={this.onHover}
>
{item}
</span>
<span className = {this.props.classword}>
{this.props.punctuation}
</span>
</span>
)
} else {
return(
<span>
<br/>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={() => this.changeColor()}
onMouseEnter={() => this.hoverOn()}
onMouseLeave={() => this.hoverOff()}
>
{item}
</span>
</span>
)
}
} else {
if(this.props.punctuation) {
return(
<span>
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
>
{this.props.item}
</span>
<span className = {this.props.classword}>
{this.props.punctuation}
</span>
</span>
)
} else {
return(
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={this.changeColor}
>
{this.props.item}
</span>
)
}
}
}
}
Finally i edit my code and here is my whole code please find error and let me know.otherwise if you change in my code i am happy if it work.
i read lots of article but can't work so please see what happen.
You will have to pass the function in different way, so that thisvariable correctly points to the component and this.setState works.
One of the way is givenbelow
<span id={this.props.atId}
className = {this.props.classword}
style={this.state.color_black ? style: highlightStyle}
onClick={() => this.changeColor()}
onMouseEnter={() => this.hoverOn()}
onMouseLeave={() => this.hoverOff()}
>
{item}
</span>
I checked the code with following working example
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
message: ""
};
}
onMouseEnter() {
this.setState({message: 'Mouse Enter'})
}
onMouseLeave() {
this.setState({message: 'Mouse Leave'})
}
render() {
return (
<div>
<Hello name={this.state.name} />
<p onMouseEnter={() => this.onMouseEnter()} onMouseLeave={() => this.onMouseLeave()}>
Hover here!
</p>
<span>{this.state.message}</span>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Related
I am new in react Js and i want to build a multiple buttons like on link.
Can anybody help me .It will be very helpful to understand statements and components .
http://noxious-ornament.surge.sh/
i try to write something like this but i don't know how to continue.
import React, { Component } from 'react'
import './Ar.css';
class Ar extends Component {
constructor() {
super();
this.state = {
buttonPressed: 0
// 0 could be your default view
}
}
handleClick = (button) => {
this.setState({ buttonPressed: button })
}
render() {
return(
<div>
<button
className='button1'
onClick={() => this.handleClick(1)}
> BUTTON 1
</button>
<button
className='button2'
onClick={() => this.handleClick(1)}
> BUTTON 2
</button>
<button
className='button2'
onClick={() => this.handleClick(1)}
> BUTTON 3
</button>
}
</div>
)
}
}
export default Ar
This is a start. Next I'd add react-router-dom so you can load the SomePage component.
const {Component} = React;
function SomePage(props){
return (
<div>
Button {props.value} has been pressed!
<button>back</button>
</div>
)
};
class App extends Component {
constructor() {
super();
this.state = {
buttonPressed: 0,
buttonCount: [1,2,3,4,5]
}
}
handleClick = (event) => {
this.setState({ buttonPressed: event.target.id });
}
render() {
return(
<div>
{this.state.buttonCount.length > 0 ? this.state.buttonCount.map((item,index) => (
<button id={item} key = {index} onClick={()=>this.handleClick} className={`button${item}`}>
{item}
</button>
))
: null
}
</div>
)
}
}
// Render
ReactDOM.render(
<App />,
document.getElementById("react")
);
.button1 {
background-color: green;
}
.button2 {
background-color: blue;
}
.button3 {
background-color: red;
}
.button4 {
background-color: yellow;
}
.button5 {
background-color: purple;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
You can have a state variable in the type of array:
this.state = {
buttonPressed: 0,
burronArray:[
{
id : 1,
name : "Button 1"
},
{
id : 2,
name : "Button 2"
},
]
}
and in the render function:
render() {
return(
<div>
{this.state.buttonArray.length > 0 ? buttonArray.map((button, index) => return(
<button
key={index}
value = {button.id}
className='button1'
onClick={() => this.handleClick(1)}
> {button.name}
</button>
)) : null}
</div>
)
}
In the following code I reorganize a list from bottom to top or from top to bottom.
I would rather be able to reorganize it from left to right.
Do you have any idea how to do this?
App
import React, { Component } from "react";
import FruitList from "./FruitList";
const UP = -1;
const DOWN = 1;
class App extends React.Component {
state = {
// set new state for bind key items
items: [
{ id: 1, name: "orange", bgColor: "#f9cb9c" },
{ id: 2, name: "lemon", bgColor: "#fee599" },
{ id: 3, name: "strawberry", bgColor: "#e06666" }
]
};
handleMove = (id, direction) => {
const { items } = this.state;
const position = items.findIndex(i => i.id === id);
if (position < 0) {
throw new Error("Given item not found.");
} else if (
(direction === UP && position === 0) ||
(direction === DOWN && position === items.length - 1)
) {
return; // canot move outside of array
}
const item = items[position]; // save item for later
const newItems = items.filter(i => i.id !== id); // remove item from array
newItems.splice(position + direction, 0, item);
this.setState({ items: newItems });
};
render() {
return <FruitList fruitList={this.state.items} onMove={this.handleMove} />;
}
}
export default App;
My components
import React, { Component } from "react";
const UP = -1;
const DOWN = 1;
class FruitList extends React.Component {
render() {
const { fruitList, onMove } = this.props;
return (
<div>
{fruitList.map(item => (
<div key={item.id} style={{ backgroundColor: item.bgColor }}>
<div className="fruitsId">{item.id}</div>
<div className="fruitsName">{item.name}</div>
<div className="fruitsArrows">
<a onClick={() => onMove(item.id, UP)}>▲</a>
<a onClick={() => onMove(item.id, DOWN)}>▼</a>
</div>
</div>
))}
</div>
);
}
}
export default FruitList;
You can do this using css flexbox.
I applied { display: "flex" } to the root div in FruitList. (The direction is default row).
FruitList.js
class FruitList extends React.Component {
render() {
const { fruitList, onMove } = this.props;
return (
<div style={{ display: "flex" }}>
{fruitList.map(item => (
<div
key={item.id}
style={{
backgroundColor: item.bgColor,
display: "flex",
}}
>
<div className="fruitsArrows">
<a onClick={() => onMove(item.id, LEFT)}>←</a>
</div>
<div className="fruitsId">{item.id}</div>
<div className="fruitsName">{item.name}</div>
<div className="fruitsArrows">
<a onClick={() => onMove(item.id, RIGHT)}>→</a>
</div>
</div>
))}
</div>
);
}
}
Playground
I would like to change current li item color when I click it.
How to add prop to item(using array map), when I click it? I use styled-components
const Li = styled.li`
color: ${props => (props.checked ? "red" : "green")};
`;
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
items: []
};
}
render() {
const ShowItems = this.state.items.map((item, index) => {
return (
<Li key={index}>
{item}
<button onClick={() => this.deleteItemHandler(index)}> Delete</button>
</Li>
);
});
return (
<Wrapper>
<AddItem
addItemHandler={this.addItem}
InputValue={this.state.value}
InputValueHandler={this.inputValue}
/>
{ShowItems}
</Wrapper>
);
}
}
Check out this code working on CodeSandBox
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import styled from "styled-components";
const Li = styled.li`
color: ${props => (props.checked ? "red" : "green")};
`;
class App extends Component {
state = {
value: "",
items: [],
selected: -1
};
handleChange = e => {
this.setState({
[e.currentTarget.name]: e.currentTarget.value
});
};
handleAdd = () => {
const { items, value } = this.state;
this.setState({
items: [...items, value],
value: ""
});
};
handleRemove = index => {
const { items, selected } = this.state;
items.splice(index, 1);
if (index < selected) index = selected - 1;
if (index === selected) index = -1;
if (index > selected) index = selected;
this.setState({
items: items,
selected: index
});
};
handleActiveItem = index => {
this.setState({ selected: index });
};
render() {
const { value, items, selected } = this.state;
return (
<div>
<input
type="text"
value={value}
name="value"
onChange={this.handleChange}
/>
<button
style={{ margin: "0px 5px" }}
disabled={!value}
className="btn btn-sm btn-success"
onClick={this.handleAdd}
>
+
</button>
<ul className="li">
{items.map((item, index) => (
<Li key={index} checked={selected === index}>
<span onClick={() => this.handleActiveItem(index)}>{item}</span>
<button
style={{ margin: "1px 5px" }}
className="btn btn-sm btn-danger"
onClick={() => this.handleRemove(index)}
>
X
</button>
</Li>
))}
</ul>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Ignore the handlers if you don't need them. Thanks to this effort I learnt about styled-components and discovered CodeSandBox.
EDIT :
Added a <span> inside <li> to avoid nested onClick, previously <li> (parent) and <button> (child) both had onClick attribute. On button Click two onClick events were fired resulting in unexpected behaviour in some use cases. You must correct this in your code.
Added logic to keep item selected when an item before it is deleted.
Added button validation to avoid adding empty string/items in list.
Also updated CodeSandBox Code to reflect above changes.
So you need keep track of the active index, and use it too change the color of the active component color.
state ={
activeIndex: void 0
}
const Li = styled.li`
color: ${props => props.checked ? "red" : "green"};
;`
deleteItemHandler = (index) => {
this.setState({
activeIndex: index
})
}
render() {
const ShowItems = this.state.items.map((item, index) => {
return (
<Li key={index} checked={index === this.state.activeIndex} > {item} < button onClick={() => this.deleteItemHandler(index)
}> Delete</button ></Li >
)
})
return (
<Wrapper>
<AddItem
addItemHandler={this.addItem}
InputValue={this.state.value}
InputValueHandler={this.inputValue}
/>
{ShowItems}
</Wrapper>
);
Try this
const Li = styled.li`
color: ${props => props.checked ? "red" : "green"};
;`
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "",
items: [],
currentChecked: null
};
}
render() {
const ShowItems = this.state.items.map((item, index) => {
return (
<Li key={index} checked={index === this.state.currentChecked} >
{item}
<button onClick={() => this.setState({currentChecked: index})}>Delete</button >
</Li >
)
})
return (
<Wrapper>
<AddItem
addItemHandler={this.addItem}
InputValue={this.state.value}
InputValueHandler={this.inputValue}
/>
{ShowItems}
</Wrapper>
);
So i am currently unable to focus on an input field - I have a card, which has a onClick handler. Once you clicked it - it brings up the input field, however, i cannot get the input field to focus:
The key area where things are going wrong are within renderTextField where i have set a reference, and then call this.myInput.focus() in handleClickInside, but still no luck.
Code below
import React, { Component } from 'react';
import { CSSTransition, transit } from 'react-css-transition';
import Text from './Text';
import Card from './Card';
import MenuIcon from '../icons/MenuIcon';
const style = {
container: { height: '60px', width: '300px' },
input: { border: 'none', fontSize: '14px', background: '#ff000000' },
icon: { position: 'absolute', right: '10px', top: '18px' },
};
class Input extends Component {
state = {
clickedOutside: true,
value: '',
};
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
myRef = React.createRef();
myInput = React.createRef();
handleClickOutside = (e) => {
if (!this.myRef.current.contains(e.target)) {
this.setState({ clickedOutside: true });
}
};
handleClickInside = () => {
this.setState({ clickedOutside: false });
this.myInput.current.focus();
}
renderField = () => {
const { clickedOutside, value } = this.state;
return (
<div>
<CSSTransition
defaultStyle={{ transform: 'translate(0, -2px)' }}
enterStyle={{ transform: transit('translate(0, -16px)', 150, 'ease-in-out') }}
leaveStyle={{ transform: transit('translate(0, -2px)', 150, 'ease-in-out') }}
activeStyle={{ transform: 'translate(0, -16px)' }}
active={!clickedOutside || value.length > 0}
>
<Text>Password</Text>
{ this.renderTextField() }
</CSSTransition>
</div>
);
}
renderTextField = () => {
const { clickedOutside, value } = this.state;
return (
<input
ref={this.myInput}
style={style.input}
type="text"
value={value}
placeholder={!clickedOutside ? 'Enter Password...' : null}
disabled={clickedOutside}
onChange={e => this.setState({ value: e.target.value })}
/>
);
}
renderIcon = () => (
<div style={style.icon}>
<MenuIcon />
</div>
)
render() {
return (
<div ref={this.myRef} onClick={this.handleClickInside} >
<Card override={style.container}>
{ this.renderField() }
{ this.renderIcon() }
</Card>
</div>
);
}
}
export default Input;
First create a ref:
myInput = React.createRef();
Assign the ref:
ref={this.myInput}
Then, to focus myInput, use:
this.myInput.current.focus()
I'm trying to change display of div.Filters on click of plus or minus button. The button changes on click, if it's a + changes to -, and vice versa.
Here's the code:
export class NavLeftMobile extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
isToggle: true
};
}
handleClick(e) {
this.setState({
isToggle: !this.state.isToggle
});
}
render() {
let button;
if (this.state.isToggle) {
button = (
<button className="Menos" onClick={() => this.handleClick()}>
-
</button>
);
} else {
button = (
<button className="Menos" onClick={() => this.handleClick()}>
+
</button>
);
}
return (
<div>
<div className="NavLeftMobile">
<h1>categories</h1>
<h3>Manufacturer{button}</h3>
<div
className="Filters"
style={{ display: this.state.isToggle ? "block" : "none" }}
>
<p>Lusograph (10)</p>
</div>
<h3>Color{button}</h3>
<div
className="Filters"
style={{ display: this.state.isToggle ? "block" : "none" }}
>
<p>Black (10)</p>
</div>
</div>
</div>
);
}
}
So, when clicking on one of the buttons, handleClick function is called and the display from div.Filters changes, if it's block to none and vice versa.
Basically, I want to toggle each section independent from each other.
If you want each section to be Collapsible and indepent, then the state should not live on your wrapper component, instead you can create another class component that keeps track of it.
class Collapsible extends React.Component {
constructor(props) {
super(props);
this.state = {
collapsed: true
};
}
onToggle = () => {
const { collapsed } = this.state;
this.setState(() => ({
collapsed : !collapsed
}))
}
render () {
const { title, children } = this.props;
const { collapsed } = this.state;
return (
<div>
<h3>
{title}
<a onClick={this.onToggle}>
{collapsed ? '+' : '-'}
</a>
</h3>
<div style={{
display : collapsed ? "block" : "none"
}}>
{children}
</div>
</div>
);
}
}
class NavLeftMobile extends React.Component {
render() {
return (
<div>
<div className="NavLeftMobile">
<h1>categories</h1>
<Collapsible title="Manufacturer">
Lusograph (10)
</Collapsible>
<Collapsible title="Color">
Black (10)
</Collapsible>
</div>
</div>
);
}
}
ReactDOM.render(
<NavLeftMobile/>,
document.querySelector('#app')
);