React.js
[TOC]
表单
在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同。
一般来说，表单以及表单中的控件（如：input、select……）是页面中与 JavaScript 打交道最多的元素了。虽然我们可以通过 ref 的形式去操作它们，但是这样会比较麻烦，React.js 为我们提供了一个更好的方式把 React.js 中的数据以及逻辑与表单控件关联起来。
受控组件
受控组件 : 用 props 传入数据的话，组件可以被认为是受控（因为组件被父级传入的 props 控制）
非受控组件 : 数据只保存在组件内部的 state 的话，是非受控组件（因为外部没办法直接控制 state）
广义来说，页面中的任意元素都是一个独立的组件，表单控件也是，它们内部也会维护属于自己的状态（如：value，selected，checked……），当然这些状态是由原生实现的，而非 React.js 来控制的，但是有的时候我们希望通过 React.js 来管理和维护表单控件的状态，我们把这种控件（控件）称为： 受控组件， 针对不同的组件，状态的维护方式也有所差异
- input
- textarea
- select
通过 state 来控制组件状态
- 创建 state 与组件的某个状态进行绑定
- 监听组件某些事件来更新 state
input
class ControlledComponent extends React.Component {
constructor(args) {
super(args);
this.state = {
v1: 'kaikeba'
};
this.changeValue = this.changeValue.bind(this);
}
changeValue({target:{value:v1}}) {
this.setState({
v1
});
}
render() {
return(
);
}
}
通过受控组件，可以更加便捷的操控组件交互
...
changeValue({target:{value}}) {
this.setState({
v1: value.toUpperCase()
});
}
...
textarea
textarea 与 input 类似，但是需要注意的是： 使用 value ，而不是 内容（innerHTML）
// 正确
// 错误
select
select 在 React.js 中也做了一些处理，不在是通过 selected 属性来表示选中元素，而是通过 select 标签的 value 属性
多选
我们还可以设置多选 select，对应的 value 就是一个数组
...
this.state = {
v4: ['html', 'javascript']
}
...
...
changeValue4({target:{options}}) {
this.setState({
v4: [...options].filter(o=>o.selected).map(o=>o.value)
});
}
...
...
...
单选
radio 和下面的 checkbox 需要注意的是，受控的属性不在是 value ，而是 checked
...
this.state = {
v5: '女',
v6: ['前端', '后端'],
}
...
changeValue5(e) {
this.setState({
v5: e.target.value
});
}
changeValue6({target:{value}}) {
let {v6} = this.state;
if (v6.includes(value)) {
v6 = v6.filter(v=>v!==value);
} else {
v6.push(value)
}
this.setState({
v6
});
}
...
...
...
非受控组件
话又说回来，通过上面的学习，我们知道，每个受控组件，且不同的类型的受控组件它能控制的状态只有那么一些：value、checked，但是实际上一个组件的状态远远不止这些，比如 input 的焦点、禁用、只读 等，都是组件的状态，如果每一个状态都通过上面的方式来管理，就会特别的麻烦了。这个时候，我们就需要用其他方式来处理了：DOM
Refs & DOM
React.js 提供了多种方式来获取 DOM 元素
- 回调 Refs
- React.createRef()
ref 属性
无论是 回调 Refs 还是 React.createRef()，都需要通过一个属性 ref 来进行设置
回调 Refs
这种方式，我们在前面已经使用过了
class UnControlledComponent extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
this.getElementInfo = this.getElementInfo.bind(this);
}
selectURL() {
this.refInput.select();
}
getElementInfo() {
this.refDiv.getBoundingClientRect()
}
render() {
return (
this.refInput = el} type="text" value="http://kaikeba.com" />
this.refDiv = el} style={{width: '100px', height:'100px',background:'red'}}>
)
}
}
React.createRef()
该方法返回一个 ref 对象，在 jsx 通过 ref 属性绑定该对象，该对象下的 current 属性就指向了绑定的元素或组件对象
class ChildComponent extends React.Component {
constructor(props) {
super(props);
}
hello() {
console.log('ChildComponent');
}
render() {
return(
ChildComponent
);
}
}
class UnControlledComponent extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
this.getElementInfo = this.getElementInfo.bind(this);
this.refInput = React.createRef();
this.refDiv = React.createRef();
this.refChild = React.createRef();
}
selectURL() {
this.refInput.current.select();
}
getElementInfo() {
this.refDiv.current.getBoundingClientRect()
}
getElementInfo() {
this.refChild.current;
}
render() {
return (
建议
- 尽量避免从 props 中派生 state
- 尽量使用 props，避免使用 state