Question

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

<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事件并更改了显示为lable this.state.tripType 的切换状态。

enableReturnDate(e){

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

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

我该怎么做？

Answer 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
        })
    }

对datepicker点击做出反应想要更改切换值

1 个答案: