从零开始React系列: React核心概念(二)

没空铲屎的艾伦
124 阅读4分钟

继续跟着官方文档学习核心概念

事件处理

在React中，事件处理可以在JSX中直接定义事件处理函数，比如onClick、onMouseOver等。我们可以注意到，这些事件都是JavaScript的原生方法，使用了小驼峰命名法 我们做个简单示例:

class EventComponent extends React.Component {
  toggle() {
    this.setState({
      isPass: !isPass
    })
  }

  render() {
    return (
      <button onClick={this.toggle}>Click me</button>
    );
  }
}

在这个例子中，我们定义了一个按钮元素，并给它添加了一个onClick属性，属性值是一个函数引用，指向了组件的handleClick方法。当按钮被点击时，React会调用handleClick方法来处理事件。

与Vue的不同

  • Vue提供了修饰符
<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="value">
    <button type="submit">Submit</button>
  </form>
</template>

这个例子中，在表单元素上使用了@submit.prevent指令来阻止表单的默认行为

在React中如果想要实现类似行为, 则需要在方法中使用event.preventDefalut()阻止默认行为

handleSubmit(e) {
  e.preventDefault();
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" v-model="value">
      <button type="submit">Submit</button> 
    </form>
  );
}

条件渲染

React中的条件渲染指的是在渲染组件时根据一定条件来决定渲染哪些元素或组件，常见的条件渲染方式有以下几种：

  1. if语句

使用if语句来根据条件来渲染不同的组件或元素。例如：

render() {
  let element;
  if (this.state.isPass) {
    element = this.commonElement()
  } else {
    element = this.byeElement()
  }

  return (
    <div>
      {this.buttonElement()}
      {element}
    </div>
  )
}

在这个例子中，如果state中的isPass为true，则渲染一个包含"Hello, World!"文本的div元素，否则渲染一个包含"Bye, World!"文本的div元素。

  1. 三元表达式

使用三元表达式来根据条件来渲染不同的组件或元素。例如：

render() {
  return (
    <div>
      {this.buttonElement()}
      {this.state.isPass ? this.commonElement() : this.byeElement()}
    </div>
  )
}

在这个例子中，如果state中的isPass为true，则渲染一个包含"Hello, World!"文本的div元素，否则渲染一个包含"Bye, World!"文本的div元素。

  1. &&运算符

使用&&运算符来根据条件来渲染不同的组件或元素。例如：

render() {
  return (
    <div>
      {this.buttonElement()}
      {this.state.isPass && this.commonElement()}
    </div>
  )
}

在这个例子中，如果state中的isPass为true，则渲染一个包含"Hello, World!"文本的div元素，否则什么也不渲染。

为了减少冗余代码, 我提取了部分需要重复使用的元素, 代码如下:

// 切换状态
toggle = () => {
  this.setState({
    isPass: !this.state.isPass
  })
}

// common element
commonElement = () => {
  return (
    <div>Hello, World</div>
  )
}

// byeElement
byeElement = () => {
  return (
    <div>Bye, World</div>
  )
}

列表 & key

在React中，列表渲染是非常常见的需求。通常，我们需要将一个数组中的数据渲染为一个列表。为了实现这个功能，React提供了一个叫做map()的函数，它可以将数组中的每一个元素转化为一个React元素。

下面是一个例子：

class ListComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'orange' },
      ]
    };
  }

  render() {
    return (
      <ul>
        {this.state.list.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    );
  }
}

key的作用是帮助React识别哪些元素是新增的，哪些元素是删除的。每一个元素都应该有一个唯一的key值。

表单

React中的表单和HTML中的表单类似，都是用来收集用户输入的数据并提交到服务器的。React的表单组件可以通过state来管理表单数据，以及通过事件处理函数来处理表单的提交、重置等操作。

下面是一个简单的React表单组件的代码示例：

import React from "react";

class formComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      age: '',
      gender: 'male',
      isChecked: false
    };
  }

  handleChange = (event) => {
    const { name, value, type, checked } = event.target;
    const newValue = type === 'checkbox' ? checked : value;
    this.setState({ [name]: newValue });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
  };

  handleReset = () => {
    this.setState({
      name: '',
      age: '',
      gender: 'male',
      isChecked: false
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit} onReset={this.handleReset}>
        <div>
          <label>
            Name:
            <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
          </label>
        </div>
        <div>
          <label>
            Age:
            <input type="number" name="age" value={this.state.age} onChange={this.handleChange} />
          </label>
        </div>
        <div>
          <label>
            Gender:
            <select name="gender" value={this.state.gender} onChange={this.handleChange}>
              <option value="male">Male</option>
              <option value="female">Female</option>
              <option value="other">Other</option>
            </select>
          </label>
        </div>
        <div>
          <label>
            <input type="checkbox" name="isChecked" checked={this.state.isChecked} onChange={this.handleChange} />
            Is Checked?
          </label>
        </div>
        <div>
          <button type="submit">Submit</button>
          <button type="reset">Reset</button>
        </div>
      </form>
    );
  }
}

export default formComponent;

在这个表单组件中，我们使用了四个表单元素来收集用户输入的数据：文本输入框、数字输入框、下拉菜单和复选框。每个表单元素都有一个name属性和一个value属性，用来表示表单数据的字段名和值。当表单元素的值发生变化时，我们通过onChange事件处理函数来更新组件状态中对应的字段值。

在表单的提交和重置操作中，我们分别定义了handleSubmit和handleReset事件处理函数，并将它们分别绑定到form元素的onSubmit和onReset事件上。在handleSubmit事件处理函数中，我们通过preventDefault()方法阻止了表单的默认提交行为，并将表单数据输出到控制台。在handleReset事件处理函数中，我们通过setState()方法将组件状态重置为初始值。

下一章, 我们将结束核心概念的学习, 进入React高级指引部分, 请持续关注~

源码地址 commitId: 665f35b082ca44611c34165d33944febf26b910a

avatar
文章
阅读
粉丝