React-核心JSX语法三

萌哥哥
258 阅读4分钟

需要学习掌握的知识点

1.监听事件

2.this的指向

3.箭头函数

4.e.preventDefault()取消一个目标元素的默认行为

jsx绑定属性

很多时候，描述的HTML原生会有一些属性，而我们希望这些属性也是动态的：

  • 比如元素都会有title属性
  • 比如img元素会有src属性
  • 比如a元素会有href属性
  • 比如元素可能需要绑定class
    • 注意：绑定class比较特殊，因为class在js中是一个关键字，所以jsx中不允许直接写class
    • 写法：使用className替代
  • 比如原生使用内联样式style
    • style后面跟的是一个对象类型，对象中是样式的属性名和属性值；
    • 注意：这里会讲属性名转成驼峰标识，而不是连接符-；

我们来演示一下属性的绑定

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "你好好好学习呀",
      imgUrl: "https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
      link: "https://www.baidu.com",
      active: false
    }
  }
  render() {
    const {title, imgUrl, link} = this.state
    return (
      <div>
        {/*1.绑定普通属性*/}
        <h2 title={title}>Hello World</h2>
        <img src={imgUrl} alt=""/>
        <a href={link} target="_blank">百度一下</a>
        <label htmlFor=""></label>
        {/*2.绑定class*/}
        <div className={"message " + (this.state.active ? "active": "")}>你好啊</div>
        <div className={["message", (this.state.active ? "active": "")].join(" ")}>你好啊</div>
        {/*3.绑定style*/}
        <div style={{fontSize: "30px", color: "red", backgroundColor: "blue"}}>我是文本</div>
      </div>
    )
  }
}

jsx事件监听

和原生绑定区别

如果原生DOM原生有一个监听事件，我们可以如何操作呢？

  • 方式一：获取DOM原生，添加监听事件；

  • 方式二：在HTML原生中，直接绑定onclick；

  • btnClick()这样写的原因是onclick绑定的后面是跟上JavaScript代码；

<button onclick="btnClick()">点我一下</button>
<script>
  function btnClick() {
  console.log("按钮发生了点击");
}
</script>

在React中是如何操作呢？

我们来实现一下React中的事件监听，这里主要有两点不同

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写；
  • 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；
class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.btnClick}>点我一下(React)</button>
      </div>
    )
  }

  btnClick() {
    console.log("React按钮点击了一下")
  }
}

this绑定问题

在事件执行后，我们可能需要获取当前类的对象中相关的属性：

  • 比如我们这里打印：this.state.message
    • 但是这里会报错：Cannot read property 'state' of undefined
    • 原因是this在这里是undefined
  • 如果我们这里直接打印this，也会发现它是一个undefined
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "你好啊,路银河"
    }
  }
  render() {
    return (
      <div>
        <button onClick={this.btnClick}>点我一下(React)</button>
      </div>
    )
  }
  btnClick() {
    console.log(this);
    console.log(this.state.message);
  }
}

为什么是undefined呢？

  • 原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数；
  • 而它内部调用时，并不知道要如何绑定正确的this；

如何解决this的问题呢？

方案一：bind给btnClick显示绑定this

在传入函数时，我们可以主动绑定this：

  • 这里我们主动将btnClick中的this通过bind来进行绑定（显示绑定）
  • 那么之后React内部调用btnClick函数时，就会有一个this，并且是我们绑定的this；
<button onClick={this.btnClick.bind(this)}>点我一下(React)</button>

但是呢，如果我有两个函数都需要用到btnClick的绑定：

  • 我们发现 bind(this) 需要书写两遍；
<button onClick={this.btnClick.bind(this)}>点我一下(React)</button>
<button onClick={this.btnClick.bind(this)}>也点我一下(React)</button>

这个我们可以通过在构造方法中直接给this.btnClick绑定this来解决：

  • 注意查看 constructor 中我们的操作：this.btnClick = this.btnClick.bind(this);
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: "你好啊,路银河"
    }

    this.btnClick = this.btnClick.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.btnClick}>点我一下(React)</button>
        <button onClick={this.btnClick}>也点我一下(React)</button>
      </div>
    )
  }

  btnClick() {
    console.log(this);
    console.log(this.state.message);
  }
}

方案二：使用箭头函数中永远不绑定this

你会发现我这里将btnClick的定义变成了一种赋值语句：

  • 这是ES6中给类定义属性的方法，称之为class fields语法；
  • 因为这里我们赋值时，使用了箭头函数，所以在当前函数中的this会去上一个作用域中查找；
  • 而上一个作用域中的this就是当前的对象；
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter= 100
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>+1</button>
      </div>
    )
  }
  
  {/*increment () {
    console.log(this.state.counter)
  }*/}
  
  increment = () => {
    console.log(this.state.counter)
  }
}

方案三：事件监听时传入箭头函数（推荐）

因为 onClick 中要求我们传入一个函数，那么我们可以直接定义一个箭头函数传入：

  • 传入的箭头函数的函数体是我们需要执行的代码，我们直接执行 this.btnClick()；
  • this.btnClick()中通过this来指定会进行隐式绑定，最终this也是正确的；
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "你好啊,路银河"
    }
  }
  render() {
    return (
      <div>
        <button onClick={() => this.btnClick()}>点我一下(React)</button>
        <button onClick={() => this.btnClick()}>也点我一下(React)</button>
      </div>
    )
  }
  btnClick() {
    console.log(this);
    console.log(this.state.message);
  }
}

事件参数传递

在执行事件函数时，有可能我们需要获取一些参数信息：比如event对象、其他参数

情况一：获取event对象

  • 很多时候我们需要拿到event对象来做一些事情（比如阻止默认行为）
  • 假如我们用不到this，那么直接传入函数就可以获取到event对象；
class App extends React.Component {
  constructor(props) {
  render() {
    return (
      <div>
        <a href="http://www.baidu.com" onClick={this.btnClick}>点我一下</a>
      </div>
    )
  }
  btnClick(e) {
    e.preventDefault();
    console.log(e);
  }
}

情况二：获取更多参数

  • 有更多参数时，我们最好的方式就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数；
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      names: ["css", "js", "react"]
    }
  }

  render() {
    return (
      <div>
        <a href="http://www.baidu.com" onClick={this.aClick}>点我一下</a>

        {
          this.state.names.map((item, index) => {
            return (
              <a href="#" onClick={e => this.aClick(e, item, index)}>{item}</a>
            )
          })
        }
      </div>
    )
  }

  aClick(e, item, index) {
    e.preventDefault();
    console.log(item, index);
    console.log(e);
  }
}
avatar
文章
阅读
粉丝