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

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

现在，批处理小部件应该在每次单击时隐藏并显示。

Answer 2

Reactjs matrial ui 表复选框隐藏

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

此方法"隐藏表头"复选框 然后做<TableBody displayRowCheckbox={false}>"隐藏表体"复选框它工作完美。

Reactjs