自定義 Reactjs 復選框組件需要動態 colors

Question

我創建了一個反應復選框組件，我正在努力制作它，以便在選中后我可以將不同的背景 colors 調用到該框。 我希望能夠擁有主要、次要和信息屬性。

我只是不知道如何將此功能添加到復選框組件。 我想要不同的 colors，復選框的類型和大小我想根據復選框的類型更改背景 colors - 所以如果主要 = 藍色，成功 = 綠色等等。

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

這很容易： 1. 將您的組件類型（“primary”等）定義為組件 state 屬性 2. 當您想更改此屬性時，請記住調用 setState。 3.使用條件渲染在渲染方法中渲染所有其他依賴屬性： https://reactjs.org/docs/conditional-rendering.html

如果還不清楚，我讓我知道:)

Answer 2

一個簡單的方法是在Checkbox組件中設置一個 styles object 來定義primary和success ，以及info styles 並添加一個style屬性到其父div的樣式該框已選中。

所以有三個關鍵點：

1）我們將一個type屬性傳遞給組件。 在組件中，我們將該值分配給 state 中的新類型屬性。

2）我們設置了一個 styles object 包含每個不同復選框類型的背景顏色

3) 如果checked為真，我們從 styles object 中分配顏色 object。

讓我們分解一下它是如何工作的：

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

style屬性接受 object。 在checked為假的情況下，我們希望返回一個定義寬度的 object，但如果checked為真，我們希望返回一個 object，其中包含來自 styles 的寬度定義和顏色定義。 在上面的行中，我使用了一個三元運算，翻譯為：

如果（選中）使用組合寬度 object 和styles[type] object（否則）只需使用 object 和寬度定義`。

 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"/>

進一步閱讀

• 傳播語法