SliderButtons의 render() 메서드에는 onClick 이벤트가 있는 버튼이 두 개 있다. disabled 속성은 동적으로 정해져서, 그림 6-15처럼 음량을 0보다 작게 하거나 100보다 크게 할 수 없다. className은 Bootstrap에서 사용하는 CSS 클래스명이다.

 

예제 코드 6.14 슬라이더 버튼 렌더링

...
    render() {
        return <div>
            <button disabled={(this.state.sliderValue<1)?true:false}
                className="btn default-btn"
                onClick={this.handleChange(-1)}> ---- 함수 팩토리에서 함수를 생성하기 위해 this.handleChange에 -1을 넘겨주어 실행한다.
                    1 Less ({this.state.sliderValue-1})
            </button>
            <button disabled={(this.state.sliderValue>99) ? true : false} ---- 삼항 연산자를 사용해서 값이 1보다 작거나 99보다 큰 경우에 버튼을 비활성화한다.
                className="btn default-btn" ---- Twitter Bootstrap의 CSS 클래스명을 적용한다.
                onClick={this.handleChange(1)}>
                    1 More ({this.state.sliderValue+1}) ---- 슬라이더의 다음 값을 버튼의 라벨로 렌더링한다.
            </button>
        </div>
    }
}

---