在引导导航栏上反应颜色选择器答案

【问题标题】：React Color Picker on bootstrap navbar在引导导航栏上反应颜色选择器
【发布时间】：2019-02-28 05:10:10
【问题描述】：

我添加了一个 ColorpickerBackground 组件来更改我的应用的主体背景颜色。这很好用……

我的问题是当我添加一个新组件 ColorpickerNavbar 来更改我的引导 (4) 导航栏的颜色时，它无法按预期工作。保存后颜色变了，但目标是看到实时变化...

!important 是必需的，但我不知道如何设置它，如果我必须在 react 组件中设置它......

这是我的导航栏的 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

【问题讨论】：

标签： ruby-on-rails reactjs twitter-bootstrap bootstrap-4 react-rails

【解决方案1】：

使用方法setAttribute：

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

【讨论】：