Question

我正在构建一个小功能，其复选框样式为滑块，当打开和关闭时，应显示另一个组件 - BatchWidget。我目前设置它的方式，它适用于初始页面加载，然后按预期隐藏。但是，当我再次“切换”它以再次显示该组件时，它不起作用。有一个简单的解决方案吗？

const Slider = (props) => {
   return (
     <div className="slider-container">
       <label className="switch">
         <input type="checkbox" checked={props.checked} onClick= {props.showWidget} />
         <span className="slider round" />
       </label>
       <p className="batch-slider-title"> Batch Widget </p>
     </div>
   );
 };

 const Settings = ({showSlider}) => {
   return (
     <div className="settings">
       <i className="icon-gear" onClick={() => showSlider()} />
     </div>
   );
 }

 class WidgetContainer extends Component {

    constructor() {
      super();

    this.state = {
      checked: true,
      isSliderDisplayed: false,
    };

    this.showWidget = this.showWidget.bind(this);
    this.showSlider = this.showSlider.bind(this);
  }

   showWidget() {
     this.setState({
       checked: !this.state.checked,
     });
   }

   showSlider() {
      this.setState({
        isSliderDisplayed: !this.state.isSliderDisplayed,
   });
 }

   render() {
     const displayBatchWidget = this.state.checked ? <BatchWidget /> : null;
     const displaySlider = this.state.isSliderDisplayed ? <Slider checked={this.state.checked} showWidget={this.showWidget} /> : null;
     return (
       <div>
         <Settings showSlider={this.showSlider} />
         {displaySlider}
         {displayBatchWidget}
       </div>
     );
  }
}

Answer 1

当我尝试调试时，显示：

Warning: Failed form propType: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. Check the render method of `Slider`.

我认为这是不言自明的。

我已将复选框更改为：

<input type="checkbox" checked={props.checked} onChange= {props.showWidget} />

现在，batchWidget应该隐藏并显示每次点击。

Answer 2

Reactjs matrial ui table复选框隐藏

先做<Table selectable={false}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}>

此方法隐藏表格标题复选框然后做<TableBody displayRowCheckbox={false}> 它隐藏了表体复选框 效果很好。

reactjs

复选框隐藏和显示组件 - 反应

2 个答案: