본문 바로가기

REACT

리액트 toggle

import React from "react";

 

 

 

class CustomButton extends React.Component {

constructor() {

super();

this.state = {clicked:true

};

}

handleClick = () => {

this.setState({clicked:!this.state.clicked})

 

render() {

console.log(this.state.clicked);

let circleimg;

if(this.state.clicked === true){

circleimg = "https://img.icons8.com/material-rounded/24/000000/circled.png"

}

else if(this.state.clicked===false){

circleimg="https://img.icons8.com/material-sharp/24/000000/checked.png"

}

 

return (

<div>

<button onClick={this.handleClick}>

{this.props.text} <img src={circleimg}></img>

</button>

</div>

);

}

}

 

export default CustomButton;

 

 

 

 

Bolean True ,false

 

 

'REACT' 카테고리의 다른 글

리액트 이벤트 연습  (0) 2020.05.09
componentDidmount()  (0) 2020.05.08
리액트 세팅  (0) 2020.04.29
리액트 props state 의 차이  (0) 2020.04.29
리액트 props 2  (0) 2020.04.29