对日期选择器做出反应单击想要更改切换值答案

【问题标题】：react on datepicker click want to change toggle value对日期选择器做出反应单击想要更改切换值
【发布时间】：2017-11-16 09:38:20
【问题描述】：

我正在开发 Flight API。当用户点击回程字段时，我想将按钮从单程切换到往返（从 false 到 true）。

<DatePicker
  hintText="Return Date"
  errorText={this.state.journeyDateErrorText}
  onChange={(event, value) => {                                                    
  this.setState({journeyDate: value})
  }}
  minDate={new Date()}      
  onClick={this.enableReturnDate.bind(this)}
  />

上面是我的 datepicker 字段，当用户单击此字段时，我想将我的切换组件从 false（单程）切换为 true（往返）。

<Toggle
 thumbSwitchedStyle={{backgroundColor: 'grey'}}
 onToggle={this.handleonToggle.bind(this)}
 label={this.state.tripType}
 defaultToggled={false}
 />

为了获得我想要的结果，我添加了 onClick 事件并更改了显示为标签 this.state.tripType 的切换状态。

enableReturnDate(e){

    this.setState({
        tripType: 'Round Trip'
    })
}

添加 onClick 事件后切换状态 this.state.tripType 从单程更改为往返，但我也想将切换按钮从 false 更改为 true。

我该怎么做？

【问题讨论】：

标签： reactjs toggle material-ui

【解决方案1】：

你应该通过状态来控制切换组件，

<Toggle
     thumbSwitchedStyle={{backgroundColor: 'grey'}}
     onToggle={this.handleonToggle.bind(this)}
     label={this.state.tripType}
     defaultToggled={this.state.toggleState} // control toggle state by state
     />

    // keep the toggle state as false initially, and change it to true when datePicker has been clicked or changed

enableReturnDate(e){
        this.setState({
            tripType: 'Round Trip',
            toggleState: true  //dont forget the initialize the state as false in constructor
        })
    }

【讨论】：