Шпаргалка по кнопкам ReactJS

Кнопками? У тебя есть все здесь

Жизнь большинства веб-разработчиков вращается вокруг создания компонентов и их стилизации. Я, как backend-разработчик, обнаружил, что перебирал 4–5 ссылок на StackOverflow, прежде чем смог запустить и запустить компонент с одной кнопкой. Вот список основных операций.

Создать новый проект React

npx create-react-app react_button_cheatsheet

Как создать кнопку

class UpgradedButton extends React.Component{
     render(){
          <button>Submit</button>
     }
}

Сделайте это красивым

const StyledButton = styled.button`
    position: absolute;
    height: 10%;
    width: 10%;
    top: 50%;
    left:50%;
    font-size: 2.6vmin;
    cursor: pointer;
    box-shadow: rgba(255, 255, 255, 0.05) 0px 3px 20px;
    border-width: initial;
    background-color: grey;
    color: white;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
`
// change this line in UpgradedButton
// <button>Submit</button>
<StyledButton>Submit</StyledButton>

Изменить цвет на Hover

Добавьте это в строку CSS компонентов стиля

const StyledButton = styled.button`
    ...
    ...
    ...
    &:hover {
       background-color: #445b65;
       color: white;
    }
`

Обработка события Onclick

handleClick = () => {
    console.log("Button clicked...")
}
...
...
<Button onClick={this.handleClick}>Submit</Button>

Изменить текст при нажатии

handleClick = () => {
   buttonText = this.state.buttonText == "Start" ? "Stop" : "Start"      
   this.setState({buttonText: buttonText})
}

Полный код

Чего-то не хватает? Оставьте это в комментарии. Понравилось то, что вы читаете? Оставьте сообщение в Twitter @geeky_bhavani