var Form = React.createClass({

getInitialState(){

return {

uname:'',

upass:''

}

},

login(e){

e.preventDefault();

this.props.handler(this.state)

},

//將輸入的值給state

changeValue(e){

const target = e.target

const value = target.type==='checkbox'?target.checked:target.value

const name = target.name

this.setState({

[name]:value

})

},

render(){

return (

用戶名:

密碼:

提交

)

}

})

組件中使用方法：

組件中使用的時(shí)候傳一個(gè)handler方法便可

var Login = React.createClass({

login(state){

console.log(state.uname,state.upass)

},

render(){

return (

登陸

)

}

})

總結(jié)

以上是生活随笔為你收集整理的react 封装表格组件_React--封装的表单组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。