チェックボックスを隠して表示する - 反応する

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は非表示にし、各クリックで表示されるはずです。