React Color Picker на начальной загрузке - PullRequest
Новая
       49

React Color Picker на начальной загрузке

0 голосов
/ 24 сентября 2018

Я добавил компонент ColorpickerBackground , чтобы изменить цвет фона моего приложения.Это работает хорошо ...

Моя проблема, когда я добавляю новый компонент ColorpickerNavbar , чтобы изменить цвет моей начальной загрузки (4), она не работает должным образом.Цвет изменяется после сохранения, но цель состоит в том, чтобы увидеть изменения в реальном времени ...

Требуется !important, но я не знаю, как его установить, и ЕСЛИ мне нужно установить его вреагирующий компонент ....

Это HTML-код моей навигационной панели: 

<nav class="navbar navbar-expand-lg navbar-custom navbar-dark bg-dark navbar-fixed-top" style= "background: <%= prefered_navbar_color %>!important;" id="my_nav">
 ...
</nav>

Это HTML-код, в котором отображается палитра цветов: 

<%= f.hidden_field :navbar_color %>
                            <%= react_component('ColorpickerNavbar', { navbar_color: prefered_navbar_color, selector: 'customization_navbar_color'} ) %>
                        </div>

ColorpickerNavbar.js

import React from "react"
import PropTypes from "prop-types"

import { SketchPicker } from 'react-color'


class ColorpickerNavbar extends React.Component {

  constructor(props) {
    super(props);

    this.state = { selector: props.selector };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (navbar_color) => {
    let myNav = document.getElementById("my_nav")
    myNav.style.background = navbar_color.hex;

    let elem = document.querySelector('#' + this.state.selector);

    elem.value = navbar_color.hex;
  }


  render(){
    return  (
        <React.Fragment>
          <SketchPicker navbar_color={this.props.navbar_color}
                        onChange={this.handleChange}/>
        </React.Fragment>
    );
  }
}

ColorpickerNavbar.propTypes = {};

export default ColorpickerNavbar

1 Ответ

0 голосов
/ 24 сентября 2018

используйте метод setAttribute: 

myNav.setAttribute('style', 'background: ' + navbar_color.hex + ' !important;')
...