Question

我遇到了问题 - 我不知道如何使用道具的颜色值更改复选框颜色。我的想法是通过style属性给它，但我不知道如何切换它。我正在使用rc-switch，我想根据Switch状态更改背景。我现在有类似的东西

<Switch style={{ backgroundColor: mainColor }}/>

但它为这两种状态设置了这种颜色，我希望这个swich在处于关闭位置时变为'defaultColor'。

Answer 1

Switch Component上没有样式支柱，但有一个className prop，可用于添加自定义类。

如果您正在使用sass：

.mySwitch {
  &-black {
    background-color: black;
  }

  &-yellow {
    background-color: yellow;
  }
}

然后以编程方式切换课程。

<Switch className={`mySwitch-${color}` ... />

我认为可以选择。

Answer 2

您必须将回调传递给<Switch>组件，然后处理该事件。您可以编写一个包装原始<Switch>的组件，并在其状态发生变化时切换颜色。它看起来像这样：

import React from 'react';
import Switch from 'rc-switch';

class ColorChangingSwitch extends React.Component {
  constructor(props) {
    super(props);

    const {checked, defaultChecked} = props;
    this.state = {
      checked: checked || defaultChecked || false;
    }
  }

  onChange = (checked) => {
      // update your state
      this.setState({
      checked: checked,
    });
    this.props.onChange(checked);
  }

  render() {
    const {onChange, className, checked, ...otherProps} = this.props;
    const colorClassName = this.state.checked ? 'green' : 'red';

    return (
      <Switch
        {...otherProps}
        onChange={this.onChange}
        checked={checked}
        className={`${className} ${colorClassName}`}
      />
    );
  }
}

export default ColorChangingSwitch;

这只是一个基本的例子。我没有测试它。您仍然可以将onChange传递给该组件，并以您想要的任何方式对其做出反应。你也可以添加一个道具来定义它应该根据它的状态设置哪些颜色/类而不是硬编码它们。

如何将React prop传递给CSS

2 个答案: