目录
1.表单
在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同。
一般来说，表单以及表单中的控件（如：input、select……）是页面中与 JavaScript 打交道最多的元素了。虽然我们可以通过 ref 的形式去操作它们，但是这样会比较麻烦，React.js 为我们提供了一个更好的方式把 React.js 中的数据以及逻辑与表单控件关联起来。
1.1受控组件
受控组件: 用 props 传入数据的话，组件可以被认为是受控（因为组件被父级传入的 props 控制）非受控组件: 数据不受外部传入props数据控制，只保存在组件内部的 state 的话，是非受控组件（因为外部没办法直接控制 state）
广义来说，页面中的任意元素都是一个独立的组件，表单控件也是，它们内部也会维护属于自己的状态（如：value，selected，checked……），当然这些状态是由原生实现的，而非 React.js 来控制的，但是有的时候我们希望通过 React.js 来管理和维护表单控件的状态，我们把这种控件（控件）称为： 受控组件， 针对不同的组件，状态的维护方式也有所差异
- input
- textarea
- select
通过 state 来控制组件状态
- 创建 state 与组件的某个状态进行绑定
- 监听组件某些事件来更新 state
怎样将非受控组件变成受控组件？
- input非受控组件，内部维护私有数据（value），不受外部传入props参数控制；
- 非受控组件要转变为受控组件：通过onChange监听数据的改变，然后获取事件对象解构后的target，再得到里面的数据
如<input type="text" value={this.state.v1} />是非受控组件，value值，由自己维护自己内部的状态不由外部更改，不接收外部传入的参数props。此时想要input输入框更改后，input的value也变化是不可能，这就是非受控组件。
通过onChange监听非受控组件的事件onChange={this.changeValue}， this.changeValue = this.changeValue.bind(this)进行绑定，此时changeValue方法中会获得一个事件对象（第一个参数就是事件对象） ，通过事件对象就可以获得输入的值，<input type="text" value={this.state.v1} onChange={this.changeValue} />即可绑定输入框的值。
changeValue({target:{value:v1}}) {
this.setState({
v1
});
}
1.1.1input
受控的属性为 value 属性。
import React from 'react';
class CanControll extends React.Component{
constructor(props){
super(props);
//1.创建state状态，使val与input的value值进行绑定
this.state = {
val:'kaikeba'
}
this.changeVal = this.changeVal.bind(this);
}
//2.监听组件onChange事件来更新state
//将target解构出来，再对里面的对象进行解构，赋值给别名val
changeVal({target:{value:val}}){
// const user = {
// id: 123,
// name: 'hehe',
// education: {
// degree: 'Masters'
// }
// };
// const {education: {degree:vala}} = user;
// console.log(vala); //prints: Masters
//注意setState()是方法
this.setState({
val
})
}
// changeVal(e) {
// this.setState({
// val: e.target.value
// });
// }
render(){
return(
<div>
<input type="text" value={this.state.val} onChange={this.changeVal} />
<hr/>
{this.state.val}
</div>
);
}
}
export default CanControll;通过受控组件，可以更加便捷的操控组件交互
...
changeValue({target:{value}}) {
this.setState({
v1: value.toUpperCase()
});
}
...1.1.2textarea
textarea 与 input 原理类似，但是需要注意的是： 使用 value ，而不是 内容（innerHTML）
// 正确
<textarea value={this.state.v2} onChange={this.changeValue2} cols="30" rows="10"></textarea>
// 错误
<textarea onChange={this.changeValue2} cols="30" rows="10">{this.state.v2}</textarea>1.1.3select——单选
select 在 React.js 中也做了一些处理，不再是通过 selected 属性来表示选中元素，而是通过 select 标签的 value 属性。
注意：结构时使用{target:{options} ，从options中结构出来
import React from 'react';
/**
* select的非受控组件
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.创建state状态，使val与input的value值进行绑定
this.state = {
val: 'html'
}
this.changeVal = this.changeVal.bind(this);
}
//2.监听组件onChange事件来更新state
//将target解构出来，再对里面的对象进行解构，赋值给别名val
changeVal({target:{options}}) {
this.setState({
val:options
})
}
render() {
return (
<div>
<select value={this.state.val} onChange={this.changeValue3}>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
<hr/>
<div>{this.state.val}</div>
</div>
);
}
}
export default CanControll;1.1.4select——多选
我们还可以设置多选 select，对应的 value 就是一个数组
...
this.state = {
v4: ['html', 'javascript']
}
...
...
changeValue4({target:{options}}) {
this.setState({
v4: [...options].filter(o=>o.selected).map(o=>o.value)
});
}
...
...
<select value={this.state.v4} onChange={this.changeValue4} multiple>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
...示例：
import React from 'react';
/**
* select（多选：从多个选项中选择一个）的非受控组件
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.创建state状态，使val与input的value值进行绑定
this.state = {
//select多选时，对应的 value 就是一个数组
val: ['html','js']
}
this.changeVal = this.changeVal.bind(this);
}
//2.监听组件onChange事件来更新state
changeVal({ target: { options } }) {
this.setState({
//因为select多选对应的value是数组，所以通过扩展运算符，将options中所有值展开到数组中
val: [...options].filter(o=>o.selected).map(o=>o.value)
})
}
render() {
return (
<div>
<select value={this.state.val} onChange={this.changeVal} multiple>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
<hr />
{this.state.val.join(',')}
</div>
);
}
}
export default CanControll;1.1.5单选
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
});
}
...
...
<label><input name="gender" type="radio" value="男" checked={this.state.v5==='男'} onChange={this.changeValue5} />男</label>
<label><input name="gender" type="radio" value="女" checked={this.state.v5==='女'} onChange={this.changeValue5} />女</label>
<label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
<label><input name="interest" type="checkbox" value="后端" checked={this.state.v6.includes('后端')} onChange={this.changeValue6} />后端</label>
...示例：
import React from 'react';
/**
* radio和checkbox的非受控组件
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.创建state状态，使val与input的value值进行绑定
this.state = {
v5: '女',
v6: ['前端', '后端'],
}
this.changeValue5 = this.changeValue5.bind(this);
this.changeValue6 = this.changeValue6.bind(this);
}
//2.监听组件onChange事件来更新state
changeValue5({ target: { value: v5 } }) {
this.setState({
v5
});
}
changeValue6({ target: { value } }) {
let { v6 } = this.state;
if (v6.includes(value)) {
v6 = v6.filter(v => v !== value);
} else {
v6.push(value)
}
this.setState({
v6
});
}
render() {
return (
<div>
<label><input name="gender" type="radio" value="男" checked={this.state.v5 === '男'} onChange={this.changeValue5} />男</label>
<label><input name="gender" type="radio" value="女" checked={this.state.v5 === '女'} onChange={this.changeValue5} />女</label>
<label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
<label><input name="interest" type="checkbox" value="后端" checked={this.state.v6.includes('后端')} onChange={this.changeValue6} />后端</label>
</div>
);
}
}
export default CanControll;1.2非受控组件——Refs & DOM（操作DOM元素）
话又说回来，通过上面的学习，我们知道，每个受控组件，且不同的类型的受控组件它能控制的状态只有那么一些：value、checked，但是实际上一个组件的状态远远不止这些，比如 input 的焦点、禁用、只读 等，都是组件的状态，如果每一个状态都通过上面的方式来管理，就会特别的麻烦了。不是有了React和Vue等框架后就不需要操作DOM元素了，这个时候，我们就需要用其他方式来处理了：DOM
Refs & DOM
React.js 提供了多种方式来获取 DOM 元素：
-
回调 Refs
-
React.createRef()
1.2.1ref 属性
无论是 回调 Refs 还是 React.createRef()，都需要通过一个属性 ref 来进行设置。ref属性值时一个函数。
<input ref={?} />示例：
import React from 'react';
/**
* 非受控组件：回调refs——获取元素信息
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
this.getElementInfo = this.getElementInfo.bind(this);
//使用React.createRef()需要在构造函数中挂载
this.refDiv = React.createRef();
}
//获取复制信息
selectURL(){
//选中input的内容
this.refInput.select();
console.log(this.refInput.value);
}
//获取元素信息
getElementInfo(){
console.log(this.refDiv.current.offsetHeight);
}
render() {
return (
<div>
{/* 此处el=>this.refInput = el 相当于方法
function(el){
this.refInput = el;//将当前元素el复制给this.refInput,但是此处this指向undefined，所以需要使用箭头函数
}
*/}
<input ref={el=>this.refInput = el} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>点击复制</button>
<hr />
<button onClick={this.getElementInfo}>获取元素信息</button>
<div ref={this.refDiv} style={{ width: '100px', height: '100px', background: 'red' }}></div>
</div>
);
}
}
export default CanControll;1.2.2回调 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 (
<input ref={el => this.refInput = el} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>点击复制</button>
<hr/>
<button onClick={this.getElementInfo}>获取元素信息</button>
<div ref={el => this.refDiv = el} style={{width: '100px', height:'100px',background:'red'}}></div>
)
}
}1.2.3React.createRef()
该方法返回一个 ref 对象，在 jsx 通过 ref 属性绑定该对象，该对象下的 current 属性就指向了绑定的元素或组件对象
class ChildComponent extends React.Component {
constructor(props) {
super(props);
}
hello() {
console.log('ChildComponent');
}
render() {
return(
<div>
<h2>ChildComponent</h2>
</div>
);
}
}
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 (
<input ref={this.refInput} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>点击复制</button>
<hr/>
<button onClick={this.getElementInfo}>获取元素信息</button>
<div ref={this.refDiv} style={{width: '100px', height:'100px',background:'red'}}></div>
<hr/>
<ChildComponent ref={this.refChild} />
<button onClick={this.getReactComponent}>获取 React 实例对象</button>
)
}
}2.建议
- 尽量避免从 props 中派生 state
- 尽量使用 props，避免使用 state
