React基础（3）

最新推荐文章于 2023-07-31 10:35:01 发布

小胖梅前端

最新推荐文章于 2023-07-31 10:35:01 发布

阅读量747

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xm1037782843/article/details/127416963

版权

本文详细介绍了React的基础知识，包括受控与非受控组件的表单处理，PropTypes的类型检测，组件的组合，以及使用fetch和axios进行网络请求的方法，同时探讨了跨域请求的解决方案。

摘要由CSDN通过智能技术生成

React 组件基础

主要内容

表单
PropTypes类型检测
组合
网络请求

学习目标

知识点	要求
表单	掌握
PropTypes类型检测	掌握
组合	掌握
网络请求	掌握

一、表单

1.1 受控组件

介绍：在 HTML 中，表单元素通常自己维护 value值，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新，使 React 的 state 成为“唯一数据源”。

语法：

<input type="text" value={this.state.value}  onChange={this.handleChange} />
handleChange(event) {
  this.setState({value: event.target.value});
}

常见的受控组件

  input 
  textarea
  select

提交功能,阻止form标签的默认行为

<form action="https://www.baidu.com" onSubmit={this.sub}>
    用户名：<input type="text" name='username' value={this.state.username} onChange={this.cname} />
    密码：<input type="password" name='password' value={this.state.pwd} onChange={this.cpwd.bind(this)} />
    <button type='submit'>提交</button>
</form>
sub =(e)=>{
    // 阻止默认事件
    e.preventDefault();
}

1.2 非受控组件

在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理，可以使用 ref 来从 DOM 节点中获取表单数据。

1. 创建步骤：

创建Ref语法：this.myRef = React.createRef()

绑定到元素上：<E ref={this.myRef}></E>

获DOM元素：this.myRef.current

2. 使用

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

二、PropTypes类型检测

2.1 介绍

PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的。

2.2 使用步骤

导入组件

import PropTypes from 'prop-types';

演示案例

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

检验语法

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 你可以将属性声明为 JS 原生类型，默认情况下
  // 这些属性都是可选的。
  optionalArray: PropTypes.array,
  optionalBool: