React事件的命名采用小駝峰方式（cameCase）,而不是小寫
使用JSX語法時你需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串
你不能通過返回false 的方式阻止默認行為。你必須顯示式的使用preventDefault

1 this

需要謹慎對待JSX回調函數(shù)中的this可以使用：
● 公共屬性（剪頭函數(shù)）
● 匿名函數(shù)
● bind進行綁定

2 向事件處理程序傳遞參數(shù)

3 Ref

● Refs提供了一種方式，允許我們訪問DOM節(jié)點或在render方法中創(chuàng)建React元素
● 在React渲染生命周期時，表單元素上的value 將會覆蓋DOM節(jié)點中的值，在非受控組件中，你經常希望React賦予組件一個初始值，但是不去控制后續(xù)的更新，在這種情況下，你可以指定一個defaultValue屬性，而不是value

3.1 為DOM元素添加ref

可以使用ref去 存儲DOM節(jié)點的引用 當ref屬性用于HTML元素時，構造函數(shù)中使用React.createRef()創(chuàng)建的ref接收底層DOM元素作為其current屬性

import React from './react';
import ReactDOM from './react-dom';
class Sum extends React.Component{
  numberA
  numberB
  result
  constructor(props){
    super(props);
    this.numberA = React.createRef();//{current:null}
    this.numberB = React.createRef();
    this.result = React.createRef();
  }
  handleClick = (event)=>{
    let numberA = this.numberA.current.value;
    let numberB = this.numberB.current.value;
    this.result.current.value = parseFloat(numberA)+parseFloat(numberB);
  }
  render(){
    return (
      <>
        <input ref={this.numberA}/>
        <input ref={this.numberB}/>
        <button onClick={this.handleClick}>+</button>
        <input ref={this.result}/>
      </>
    )
  }
}
ReactDOM.render(<Sum/>,document.getElementById('root'));

3.2 為class 組件添加ref

import React from './react';
import ReactDOM from './react-dom';
class TextInput extends React.Component{
  constructor(props){
    super(props);
    this.inputRef = React.createRef();
  }
  getTextInputFocus = ()=>{
    this.inputRef.current.focus();
  }
  render(){
    return <input ref={this.inputRef}/>
  }
}
class Form extends React.Component{
  constructor(props){
    super(props);
    this.textInputRef = React.createRef();
  }
  getFormFocus = ()=>{
    //this.textInputRef.current就會指向TextInput類組件的實例
    this.textInputRef.current.getTextInputFocus();
  }
  render(){
    return (
      <>
        <TextInput ref={this.textInputRef}/>
        <button onClick={this.getFormFocus}>獲得焦點</button>
      </>
    )
  }
}

ReactDOM.render(<Form/>,document.getElementById('root'));

3.3 ref轉發(fā)

● 不能在函數(shù)組件上使用ref 屬性，因為他們沒有實例
● ref轉發(fā)是一項將ref自動的通過組件傳遞到其一子組件的技巧
● ref轉發(fā)允許某些組件接收ref,并將其向下傳遞，（轉發(fā)它給其他組件）文章來源地址http://www.zghlxwxcb.cn/news/detail-835972.html

import React from './react';
import ReactDOM from './react-dom';
function TextInput(props,ref){
  return <input ref={ref}/>
}
const ForwardedTextInput = React.forwardRef(TextInput);
class Form extends React.Component{
  constructor(props){
    super(props);
    this.textInputRef = React.createRef();
  }
  getFormFocus = ()=>{
    //this.textInputRef.current就會指向TextInput類組件的實例
    this.textInputRef.current.focus();
  }
  render(){
    return (
      <>
        <ForwardedTextInput ref={this.textInputRef}/>
        <button onClick={this.getFormFocus}>獲得焦點</button>
      </>
    )
  }
}

ReactDOM.render(<Form/>,document.getElementById('root'));
/**
Warning: 
Function components cannot be given refs. 
Attempts to access this ref will fail.
 Did you mean to use React.forwardRef()?
不能給函數(shù)組件添加ref
 * 
 * 
 */

到了這里，關于React 事件處理 （ this問題 參數(shù)傳遞 ref）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！