Ruby on rails 引导导航栏上的反应颜色选择器

我添加了一个ColorpickerBackground组件来更改我的应用程序的主体背景颜色。这是工作得很好

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

！重要信息

是必需的，但我不知道如何设置它，如果必须在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>

...

这是显示colorpicker的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

从“React”导入React
从“道具类型”导入道具类型
从“反应颜色”导入{SketchPicker}
类ColorPickernVBAR扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={selector:props.selector}；
this.handleChange=this.handleChange.bind（this）；
}
handleChange=（导航栏颜色）=>{
让myNav=document.getElementById（“my_nav”）
myNav.style.background=navbar\u color.hex；
让elem=document.querySelector（“#”+this.state.selector）；
elem.value=navbar\u color.hex；
}
render（）{
返回(
);
}
}
ColorpickerNavbar.propTypes={}；
导出默认颜色选择器VBAR

使用方法setAttribute：

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

---

使用方法setAttribute：

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