Question

我在这里要做的是将复选框的值设置为“已选中”＆＃39; （因为它被设置为滑块）当我点击<i className='icon-gear'时。我无法访问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}/>

接收这些道具

单击另一个元素设置复选框 - 反应

1 个答案: