다음으로 Twitter Bootstrap의 CSS 클래스를 활용해서, 폼에 스타일을 적용하여 render() 메서드를 정의해보자(ch07/email/jsx/content.jsx). CSS 클래스는 className 속성으로 전달한다는 점을 기억해두자.

 

예제 코드 7.9 이메일 폼의 render( ) 메서드

render() {
    return (
        <div className="well">
            <p>{this.prompt}</p> ---- Content 컴포넌트의 this.prompt 값을 출력한다.
            <div className="form-group">
                Email: <input ref="emailAddress" className="form-control" type="text"
                placeholder="hi@azat.co"/> ---- placeholder 속성이 있는 이메일 입력 영역을 구현한다. placeholder 속성은 입력할 내용을 알려주는 시각적 장치다. className과 ref 속성도 사용했다.
            </div>
            <div className="form-group">
                Comments: <textarea ref="comments" className="form-control" placeholder="I like
                your website!"/>
            </div>
            <div className="form-group">
                <a className="btn btn-primary" value="Submit" onClick={this.submit}>Submit</a> ---- onClick 이벤트가 있는 제출 버튼에서 this.submit을 호출한다.
            </div>
        </div>
    )
}

---