核心提示:首先,我们通过一个示例来说明,在实例中我们设置了输入框 input 值value = {this.state.value}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange...
首先,我们通过一个示例来说明,在实例中我们设置了输入框 input 值value = {this.state.value}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改 state。如示例1:
var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'world'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return
hello {value} !!!
; } }); ReactDOM.render(在示例1 中,我们通过 getInitialState 设置了初始值,当 input 输入框中的内容发生变化时,通过绑定的 onChange 函数重新设置组件的 state :
this.setState({value: event.target.value});
如果有 state 有更新,则通过 render 重新渲染页面。
下面我们再看示例2:
var Content = React.createClass({ render: function() { return
Hello {this.props.myDataProp} !!!
; } }); var HelloMessage = React.createClass({ getInitialState: function() { return {value: 'world'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function() { var value = this.state.value; return示例2中,父组件通过创建事件句柄 (handleChange) ,并作为 prop (updateStateProp) 传递到你的子组件上。子组件上绑定了onChange, onChange方法将触发父组件 state 的更新并将更新的值传递到子组件上来重新渲染界面
react中常用事件
焦点类事件
onFocus //获得焦点时触发 onBlur //失去焦点时触发
表单类事件
onChange //内容改变时触发 onInput //事件在用户输入时触发 onSubmit //提交时触发
键盘类事件
onKeyDown //按下键盘按键时触发 onKeyPress //按下键盘按键并松开时触发 onKeyUp //放开先前按下的 按键时触发
触摸类事件
onTouchCancel //一般在一些高级事件发生时,触发取消touch事件。例如暂停游戏,存档等。 onTouchEnd //移走手指时触发 onTouchMove //移动手指时触发 onTouchStart //按下手指时触发
用户界面事件
onScroll //元素滚动时执行 JavaScript
滚轮事件
onWheel //事件在鼠标滚轮在元素上下滚动时触发。
剪贴板事件
onCopy //copy元素内容时触发 onCut //内容剪切时触发 onPaste //粘贴时触发
鼠标类事件
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp
有关 react 事件的详细信息请参考 React官方文档