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

Question

我已经创建了一个 react 复选框组件，我正在努力制作它，以便在选中后我可以为该框调用不同的背景颜色。我希望能够拥有 primary、secondary 和 info 属性。

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

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 样式并向父级 div 添加一个 style 属性，当复选框被选中时，它会根据类型(通过 props 传入)更新其样式。

所以有三个关键的事情:

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

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

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

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

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

style 属性接受一个对象。在 checked 为 false 的情况下，我们希望返回一个定义宽度的对象，但如果 checked 为 true，我们希望返回一个具有宽度定义的对象 和 样式中的颜色定义。在上面的行中，我使用了 ternary operation翻译为:

if (checked) use the combined width object and styles[type] object (else) just use the object with the width definition`.

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