表单事件处理

React 表单与事件

本章节我们将讨论如何在 React 中使用表单。

一个简单的实例

在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

React 实例

var HelloMessage = React . createClass ( { getInitialState : function ( ) { return { value : ' Hello Runoob! ' } ; } , handleChange : function ( event ) { this . setState ( { value : event . target . value } ) ; } , render : function ( ) { var value = this . state . value ; return < div > < input type = " text " value = { value } onChange = { this . handleChange } /> < h4 > { value } </ h4 > </ div >; } } ) ; ReactDOM . render ( < HelloMessage />, document . getElementById ( ' example ' ) ) ;