Блог

Главная - Вопросы по программированию - Изменение стиля цвета div с помощью нажатия кнопки в React

Изменение стиля цвета div с помощью нажатия кнопки в React

#javascript #html #css #reactjs #styled-components

#javascript #HTML #css #reactjs #styled-компоненты

Вопрос:

Я работаю над компонентом React, который позволит пользователю изменять цвет «IconPicker» с помощью кнопок разного цвета.

Сейчас я перепробовал несколько разных методов, но просто не могу заставить это работать. Не уверен, что это то, чем я ограничен, поскольку оно уже отображается / факт, что я использую библиотеку stylecomponents?

Я пытался передать значение, которое можно было бы применить ко всем бутонам, но в настоящее время просто пытаюсь заставить работать хотя бы один, отсюда и текущий код.

Любая помощь с благодарностью.

 import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { createGlobalStyle } from 'styled-components';




const GlobalStyle = createGlobalStyle`
 @import url('https://fonts.googleapis.com/css2?family=Passion Oneamp;display=swap');
  body {
    background-color:  #7E549F;
    font-family: 'Passion One', cursive;
    overflow: hidden;
    text-align: center;
    font: 50px;
  }
`;

export const Row = styled.div`
  display: flex;

  justifyContent:center;
    alignItems: center;
    padding: 7px;
`;

export const Title = styled.h1`

`;

 var IconPicker = styled.div`

  background: white;
  border: none;
  color: #7E549F;
  padding: 50px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%

`;
const ColourHead =  styled.div`

  background-color: #422D53;
  color: #C3B0D3;
   width: 100%;
  height: 40px;
  font-size: 30px;
  text-align: center;
  border-radius: 5px 5px 0 0;
    margin: 0;
  padding-bottom: 15px;
  position: relative;
  top: -40px;
`;

const ColourHeader = () => {
  return (
    <ColourHead>
        <h2>PLAYER CUSTOMISATION</h2>
    </ColourHead>
  )
}

export const Container = styled.div`
 display: block;
  background-color: #CAB1DE; // lilac
  justifyContent: center;
  alignItems: center;
  margin: 5px;
  text-align: center;
  height:300px;
  width: 500px;
`;

const RedBtn = styled.button`
  
   background: #C41111; // red
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%
  `;

  const BlueBtn = styled.button`

  background: #132ED0; // blue
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%
  `;

 const GreenBtn = styled.button`

   background: #15A642; // green
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

 const PinkBtn = styled.button`

  background: #EC54B9; // pink
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

  const OrangeBtn = styled.button`
  background: #EE7D0D; // orange
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

  const YellowBtn = styled.button`

  background: #EDED54; // yellow
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

  const GreyBtn = styled.button`
    background: #3F474E; // grey
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;


const WhiteBtn = styled.button`
  
background: white; // white
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

  const PurpleBtn = styled.button`
  background: #6B2FBA; // purple
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;

  const CyanBtn = styled.button`
  
  background: #50F5D0; // white
  border: none;
  color: #7E549F;
  padding: 22px;
  text-align: center;
  alignItems: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  `;


class App extends React.Component {

    constructor(){

        super();

        this.state = {

            bgColour: ""
        };
    }

    changeColour = () => {
        this.setState({bgColour: "red"});
   
    }
     

  render() {
    return (
    <React.Fragment>
    <GlobalStyle/>
    <Container>

        <ColourHeader />

        <IconPicker style={{background: this.state.bgColour}}/>
        <Row>
             <RedBtn onClick={this.changeColour}/> <BlueBtn/> <GreenBtn/> <PinkBtn/> <OrangeBtn/> <YellowBtn/> <GreyBtn/> <WhiteBtn/> <PurpleBtn/> <CyanBtn/> 
        </Row>
    </Container>

    </React.Fragment>
    );
  }
}


ReactDOM.render(
    <App />,
    document.getElementById('root')

);

Комментарии:

1. Ваша переменная написана с ошибкой при установке параметра state. Если вы используете стилизованные компоненты, рассмотрите возможность передачи цвета фона компоненту вместо использования встроенных стилей.

2. ооп хорошее место — я пробовал много примеров, поэтому написание путается. взглянем на реквизит

3. о, изменение этого написания исправило это! я тупой, это всегда самая маленькая вещь — спасибо!

Ответ №1:

Ваша переменная в setState написана с ошибкой. Помимо этого используйте преимущество styled component . Передача непосредственно цвета фона и выборка — это реквизит, подобный этому:

 
var IconPicker = styled.div`
  background: ${(props) => (props.background ? props.background : "white")};
  border: none;
  color: #7e549f;
  padding: 50px;
  text-align: center;
  alignitems: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
`;

Вот полная демонстрация и код: https://codesandbox.io/s/ecstatic-rain-25qgk?file=/src/App.js:571-885