女 } }) /* 這個元件是父元件 */ var SignupForm = React.createClass({ /* 這個初始化階段的方法 return的狀態 State */ getInitialState: function() { return { name: '', password: '', gender: '', } }, /* 這是一個自定義事件 引數倆個 * event.target=觸發的元件 *this 在觸發的時候可以指定 */ handleChange: function(name, event) { var newState = {} newState[name] = event.target.value this.setState(newState) }, /* 這是一個自定義事件 * 將this的key:gender 設為一個值 */ handleSelect: function(event) { this.setState({gender: event.target.value}) }, render: function() { console.log(this.state)

            return <form>
             觸發自己定義的 handleChange事件
                 this=元件本身

            <input type="text" placeholder="請輸入使用者名稱" onChange={this.handleChange.bind(this, 'name')} />
            <input type="password" placeholder="請輸入密碼" onChange={this.handleChange.bind(this, 'password')} />
                   呼叫自定義的性別選擇元件 handleSelect事件為他的一個函式
           <GenderSelect handleSelect={this.handleSelect}></GenderSelect>
            </form>
        }
    })
    /*
     *將父元件渲染到body中
     */
    React.render(<SignupForm></SignupForm>, document.body);
</script>