自定义 Reactjs 复选框组件需要动态颜色

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

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

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

一个简单的方法是在Checkbox组件中设置一个 styles 对象来定义primary和success，并info样式，并向父div添加一个style属性，该属性在选中该框时根据类型(通过 props 传入(更新其样式。

所以有三件关键的事情：

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

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

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

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

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

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

如果(选中(使用组合宽度对象和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"/>

相关内容

最新更新

热门标签：