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: