react学习笔记 item6 --- 事件处理

时间：2022-12-20 08:29:49

首先，我们通过一个示例来说明，在实例中我们设置了输入框 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 <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>hello {value} !!!</h4>
           </div>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

在示例1 中，我们通过 getInitialState 设置了初始值，当 input 输入框中的内容发生变化时，通过绑定的 onChange 函数重新设置组件的 state ：

this.setState({value: event.target.value});

如果有 state 有更新，则通过 render 重新渲染页面。

下面我们再看示例2：

var Content = React.createClass({
  render: function() {
return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>Hello {this.props.myDataProp} !!!</h4>
            </div>;
  }
});

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 <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

示例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官方文档
标签：

相关文章