React事件處理和表單的綁定詳解

更新時間：2022年08月31日 15:30:35 作者：小綿楊Yancy

這篇文章主要介紹了React事件處理和表單的綁定，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、事件處理

1.1 React事件

React 元素的事件處理和 DOM 元素類似。但是有一點語法上的不同:

React 事件綁定屬性的命名采用駝峰式寫法，而不是小寫。例如onclick屬性應該寫成onClick。
如果采用 JSX的語法你需要傳入一個函數(shù)作為事件處理函數(shù)，而不是一個字符串(DOM 元素的寫法)。例如已經(jīng)定義了一個名為handleClick的函數(shù)，應該這樣調(diào)用：

<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>

而不是：

<button onClick="handleClick()">Button</button>

1.2 事件對象

在事件發(fā)生時調(diào)用的函數(shù)，默認是自帶一個參數(shù)的，這個參數(shù)通常被命名為event，就是事件對象。

例如，我們?yōu)橐粋€input輸入框的onchange事件設置一個函數(shù)，獲取事件對象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class MyInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          console.log(event);
          console.log(event.target);
        }
        render() {
          return (
            <div>
              <span>Input:</span>
              <input type="text" onChange={this.handleChange} />
            </div>
          );
        }
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

可以看到，event.target就是觸發(fā)事件的dom元素。

1.3 事件傳參

除了自帶的默認參數(shù)（事件對象）外，有時候我們需要額外傳遞傳輸給事件處理的函數(shù)，這個時候不能直接調(diào)用函數(shù)并傳參，例如下面的用法是錯誤的：

<input type="text" onChange={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->this.handleChange(1)} />

正確的用法應該是使用匿名函數(shù)來實現(xiàn)傳參：

<input type="text" onChange={() => this.handleChange(event, "id")}/>

此時處理函數(shù)handleChange:

handleChange(event, id) {
      console.log(event.target.value);
      console.log(id);
}

第一個參數(shù)一定是事件對象，后面的參數(shù)名稱隨意，但是順序必須一一對應。

1.4 函數(shù)組件事件處理

通過上面的例子不難看出，class組件有一個非常麻煩的點在于必須在構造函數(shù)中聲明并綁定方法的this:

右邊中的this：這個this是在構造器方法中的，所以它的指向是組件的實例對象；

右邊handleChange方法：這個方法是在類的原型對象上的；而使用bind的函數(shù)把這個原型對象方法上的this修改成類實例對象上的this，右邊的代碼執(zhí)行完成之后生成一個新的函數(shù)，然后把這個新函數(shù)放到實例的自身上也就是等式的左邊，且給這個函數(shù)起了一個名字（左邊方法名），這樣就能解決原型方法上其他方法調(diào)用該方法this指向是undefined的問題了。此時其他方法調(diào)用該函數(shù)時this就指向的是實例對象了

而函數(shù)式組件中，就簡單了許多：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function MyInput() {
        function handleChange(event, id) {
          console.log(event.target.value);
          console.log(id);
        }
        return (
          <div>
            <span>Input:</span>
            <input type="text" onChange={() => handleChange(event, "id")} />
          </div>
        );
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

二、表單

雙向綁定

在vue中，可以使用v-model指令實現(xiàn)表單的雙向綁定，但是實際上，v-model只是v-bind和v-on的語法糖，在react中，我們可以直接利用屬性和屬性改變的處理事件實現(xiàn)雙向綁定的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生產(chǎn)環(huán)境中不建議使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        constructor(props) {
          super(props);
          this.state = { value: "Hello React!" };
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          this.setState({ value: event.target.value });
        }
        render() {
          let value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <h4>{value}</h4>
            </div>
          );
        }
      }
      ReactDOM.render(<HelloMessage />, document.getElementById("app"));
    </script>
  </body>
</html>