클릭시 ReactJS MaterialUI FloatingButton의 속성 토글

Question

FloatingButton으로 확인란 동작을 시뮬레이트해야합니다. 버튼은 처음에 secondary 속성을 true로 설정하여로드합니다.

클릭하면

<FloatingActionButton secondary={true} mini> 
    T 
</FloatingActionButton> 

, 그것은이 같이 false로 보조 속성 값을 전환 : 지금처럼 여기

<FloatingActionButton secondary={false} mini> 
    T 
</FloatingActionButton> 

여기

활성화되고 M과의 최종 결과는 무엇입니다 나는하려고 노력했다. 그러나 물론, 그것은 일하지 않고있다, 롤

당신이 나의 것보다 더 간단한, 최소한의 방법을 가지고 있다면, 나는 그것을 위해 또한 모두 다하고 있습니다. 미리 감사드립니다.

Answer 1

버튼을 토글하고 싶다면 id가 이미 설정되어 있는지 확인하는 조건을 메소드에 넣으십시오 그런 다음 여러 날짜를 추적하려면

은 당신이 : 그것은

setActiveDay(id) { 
     if (id === this.state.activeDayId) { 
      // id is already selected and user has clicked on it again so reset it by assigning "null" to it 
      this.setState({activeDayId: null}); 
     } 
     else { 
      this.setState({activeDayId: id}); 
     } 
    } 

또한이

<FloatingActionButton 
    secondary={this.state.activeDayId === 1} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
     S 
</FloatingActionButton> 

업데이트 같은 삼항 연산자를 사용하지 않고 secondary 소품에 부울을 전달할 수 있습니다 리셋 배열을 가져 가야합니다. 다음이

setActiveDay(id) { 
     let activeDayIds = [...this.state.activeDayIds]; 
     if (this.state.activeDayIds.includes(id)) { 
      // id is already in the array which means it is selected and user has clicked on it again so remove it from array 
      activeDayIds.splice(activeDayIds.indexOf(id), 1); 
     } 
     else { 
      // this id is not in the array yet which means user has activated this so include this in array 
      activeDayIds.push(id) 
     } 
     // set back the state 
     this.setState({activeDayIds: activeDayIds}); 
    } 

에 setActiveDay을 변경 한 다음

<FloatingActionButton 
     secondary={this.state.activeDayIds.includes(1)} 
     mini 
     onClick={() => this.setActiveDay(1)}> 
      S 
    </FloatingActionButton> 

Answer 2

true과 false 값이 따옴표로 묶인 경우 항상 true 값이됩니다.

당신은 당신의 secondary 소품에 {this.state.activeDayId === 1 ? "true" : "false"} , 그것은 항상 true

같이, 따옴표없이 그것을 시도 할 것이다 그래서 같이 단순히

<FloatingActionButton 
    secondary={this.state.activeDayId === 1 ? true : false} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
    S 
</FloatingActionButton> 

이상 :

<FloatingActionButton 
    secondary={this.state.activeDayId === 1} 
    mini 
    onClick={() => this.setActiveDay(1)}> 
    S 
</FloatingActionButton>