使用 react-bootstrap 或 material-ui 反应复选框状态管理？

Question

我正在做一个项目。我会在组件上使用复选框，并想展示一些具有某些功能的产品。特征将由用户检查定义。我想知道如何同时管理复选框和状态信息。

我做这个项目，<List>和<ListGroup>。我在companent中列出的类别列表。当我选择其中一个时（使用 onClick），我可以在我的 Json-Server 上看到具有相同 CategoryId 的产品。（由 my_reducer 管理）

我在互联网上进行了研究，我认为 material-ui 在复选框管理方面更有用。你怎么认为？我应该使用material-ui而不是react-bootstrap作为复选框吗？在同一个项目中同时使用material和bootstrap会影响我的网页加载速度吗？还是会出现其他问题？

我对任何想法都持开放态度。您可以与我分享您的想法，也可以向我发送有关它的指南、文档和示例。

ps：请不要添加 github 或复选框使用的官方页面（react 和 material-ui :) 因为我已经知道它们并且找不到我的问题的答案。

Answer 1

由于您没有提供任何代码，因此很难看到您要实现的目标以及“在复选框管理中更有用”在这种情况下意味着什么。您提到<List>and&nbsp;<ListGroup>，但是您是如何使用复选框的，还是在模拟带有可操作 ListGroup 项目的复选框？我认为混合两个用户界面库不是一个好主意。您最终会得到不一致的外观和感觉，并且可能会与样式等发生冲突。添加新的依赖项将根据依赖项的大小增加加载时间。如果你更喜欢material-ui，迁移整个项目使用它是有意义的。

Answer 2

这是代码试试这可能是它的工作......它有帮助。class ShowFeatures extends React.Component {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;showfchr: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;toggleChange = () => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showfchr: !this.state.showfchr,&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" checked={this.state.showfchr} onChange={this.toggleChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Show Me Some Features!&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { this.state.showfchr ? (&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div> Your All Feature Will Show here</div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;):(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div>here is defaullt</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }}