日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：小綿楊Yancy ? 更新時(shí)間： 2022-10-27 編程語言

一、事件處理

1.1 React事件

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

  • React 事件綁定屬性的命名采用駝峰式寫法，而不是小寫。 例如onclick屬性應(yīng)該寫成onClick。
  • 如果采用 JSX的語法你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串(DOM 元素的寫法)。例如已經(jīng)定義了一個(gè)名為handleClick的函數(shù)，應(yīng)該這樣調(diào)用：
<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>

而不是：

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

1.2 事件對(duì)象

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

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

<!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 事件傳參

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

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

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

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

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

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

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

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

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

右邊中的this：這個(gè)this是在構(gòu)造器方法中的，所以它的指向是組件的實(shí)例對(duì)象；

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

而函數(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指令實(shí)現(xiàn)表單的雙向綁定，但是實(shí)際上，v-model只是v-bind和v-on的語法糖，在react中，我們可以直接利用屬性和屬性改變的處理事件實(shí)現(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>

原文鏈接：https://blog.csdn.net/ZHANGYANG_1109/article/details/125889460

欄目分類
最近更新