5-React 组件之表单与受控非受控组件

2021-02-24 本文已影响0人我竟无言以对_1202

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(
            <div>
                <input type="text" value={this.state.v1} onChange={this.changeValue} />
            </div>
        );
    }
}

通过受控组件，可以更加便捷的操控组件交互

...
changeValue({target:{value}}) {
    this.setState({
            v1: value.toUpperCase()
    });
}
...

textarea

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>

select

select 在 React.js 中也做了一些处理，不在是通过 selected 属性来表示选中元素，而是通过 select 标签的 value 属性

<select value={this.state.v3} onChange={this.changeValue3}>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="javascript">javascript</option>
</select>

多选

我们还可以设置多选 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>
...

单选

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>
...

非受控组件

话又说回来，通过上面的学习，我们知道，每个受控组件，且不同的类型的受控组件它能控制的状态只有那么一些：value、checked，但是实际上一个组件的状态远远不止这些，比如 input 的焦点、禁用、只读等，都是组件的状态，如果每一个状态都通过上面的方式来管理，就会特别的麻烦了。这个时候，我们就需要用其他方式来处理了：DOM

Refs & DOM

React.js 提供了多种方式来获取 DOM 元素

回调 Refs
React.createRef()

ref 属性

无论是 回调 Refs 还是 React.createRef()，都需要通过一个属性 ref 来进行设置

<input 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 (
            <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>
        )
    }
}

React.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>
        )
    }
}

建议

尽量避免从 props 中派生 state
尽量使用 props，避免使用 state