Question

我添加了 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

Answer 1

使用方法setAttribute：

toROSMsg(cloudrgb, image);

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

1 个答案: