自定义 Reactjs Checkbox 组件需要动态颜色

Question

我创建了一个反应复选框组件，我正在努力制作它，以便在选中后我可以为该框调用不同的背景颜色。我希望能够拥有主要、次要和信息属性。

我只是不知道如何将此功能添加到复选框组件。我想要复选框的不同颜色、类型和大小我想根据复选框的类型更改背景颜色 - 所以如果主要 = 蓝色、成功 = 绿色等等。

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: true,

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


  onChange = () => {
    this.setState({
      checked: !this.state.checked
    });

  }


  render() {
    return ( 
     <div className="checkbox" onClick={this.onChange}>
      <div className="checkbox-box"> {
        this.state.checked &&
        <span className="checkbox-box-mark">
        <svg 
          viewBox = "0 0 64 64"
          xmlns = "http://www.w3.org/2000/svg"
        >
        <path 
          d="M21.33,57.82,0,36.53l5.87-5.87L21.33,46.09,58.13,9.36,64,15.23,21.33,57.82"/>
        </svg>
        </span>
      } 
      </div>  
      <div className="checkbox-label">checkbox</div> 
      </div>   
    );
  }
}
export default Checkbox

Answer 1

这样做的一个简单方法是在您的Checkbox 组件中设置一个样式对象来定义primary 和success 和info 样式并将style 属性添加到父div在选中该框时根据类型（通过道具传入）更新其样式。

所以有三点关键：

1) 我们将type 属性传递给组件。在组件中，我们将该值分配给 state 中的新类型属性。

2) 我们设置了一个样式对象，其中包含每个不同复选框类型的背景颜色

3) 如果checked 为真，我们从样式对象中分配一个颜色对象。

让我们分解一下它是如何工作的：

style={checked ? { width: '50px', ...styles[type] } : { width: '50px' }}

style 属性接受一个对象。在checked 为假的情况下，我们希望返回一个定义宽度的对象，但如果checked 为真，我们希望返回一个具有宽度定义的对象和样式中的颜色定义.在上面的行中，我使用了ternary operation，它的意思是：

如果（选中）使用组合宽度对象和styles[type]对象（否则）只使用具有宽度定义的对象。

const { Component } = React;

// App.js

function App() {
  return (
    <div className="App">
      <Checkbox type="primary" />
      <Checkbox type="success" />
      <Checkbox type="info" />
    </div>
  );
}

// Checkbox.js


// Style definitions
const styles = {
  primary: { backgroundColor: 'blue' },
  success: { backgroundColor: 'green' },
  info: { backgroundColor: 'cyan' }
}

class Checkbox extends Component {

  constructor(props) {
    super(props);

    // Set a new type property in state and assign the
    // props value of type to it
    this.state = { type: props.type, checked: false };
    this.onChange = this.onChange.bind(this);
  }

  onChange = () => {
    this.setState({ checked: !this.state.checked });
  }

  render() {
  
    // Destructure the type and checked properties from state
    const { type, checked } = this.state;
  
    return (
      <div className="checkbox" onClick={this.onChange}>
        {/* If the box is checked set a width of 50px and apply the styles for that type */}
        {/* Otherwise just set a width of 50px */}
        <div
          className="checkbox-box"
          style={checked ? { width: '50px', ...styles[type] } : { width: '50px' }}
        >
          <span className="checkbox-box-mark" >
            <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
              <path d="M21.33,57.82,0,36.53l5.87-5.87L21.33,46.09,58.13,9.36,64,15.23,21.33,57.82"/>
            </svg>
          </span>
        </div>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

进一步阅读

• Spread syntax

Answer 2

这很简单： 1. 将您的组件类型（“主要”等）定义为组件状态属性 2. 当你想改变这个属性时，记得调用 setState。 3. 使用条件渲染在渲染方法中渲染所有其他依赖属性： https://reactjs.org/docs/conditional-rendering.html

如果还不清楚，我告诉我:)