設置複選框，點擊另一個元素 - 反應

Question

當我點擊<i className='icon-gear'時，我在這裏要做的是將複選框的值設置爲'checked'（因爲它的樣式爲滑塊）。我無法訪問input來更改它的狀態。我在這裏錯過了什麼，或者我是否以錯誤的方式去討論它/接近它的更好方法是什麼？預先感謝您的幫助！

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

class Settings extends Component { 
    constructor() { 
     super(); 

    this.state = { 
     isWidgetDisplayed: false, 
     checked: false, 
    }; 

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

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

    mouseOut() { 
    this.setState({showing: false}); 
    } 

    mouseOver() { 
    this.setState({showing: true}); 
    } 

    render() { 
     const batchWidget = this.state.isWidgetDisplayed ? <BatchWidget /> : null; 
     const slider = showing => { 
     if (showing === true) { 
     return <Slider />; 
     } 
     return null; 
     }; 
    return (
    <div> 
     <div className="settings"> 
      <i className="icon-gear" onMouseOut={() => this.mouseOut()} onMouseOver={() => this.mouseOver()} onClick={this.showWidget} /> 
     </div> 
      {slider(this.state.showing)} 
      {batchWidget} 
     </div> 
    ); 
    } 
    } 

Answer 1

<input type="checkbox" />應該<input type="checkbox" checked={this.props.checked}/>

它應該通過<Slider checked={this.state.checked}/>