react——ref DOM 操作

class Test extends Component {
    constructor() {
        super()
        this.changeDom = this.changeDom.bind(this)
        this.list = []
    }

    render() {
        return (
            <div>
            	// 通过 ref 标记 DOM 节点
            	// 保存到了 this.xxx 上
                <input ref={(input) => { this.input = input }} />
                <ul ref={(ul) => { this.ul = ul }}>
                    {
                        this.list.map((res, i) => <li key={i}>{res}</li>)
                    }
                </ul>
                // 获取组件真实的 ref，请用 innerRef
                <Input innerRef={(input) => { this.input = input }} />
                <button onClick={this.changeDom}>click</button>
            </div>
        )
    }

    changeDom() {
    	// 获取 DOM 节点的 value 值
        console.log(this.input.value);
        setInterval(() => {
            this.setState(() => {
                let content = this.list
                content.push('hello')
                return { list: content }
            }, () => {
                // 获取更新 DOM 节点在 setState 的第二个回调中进行
                console.log(this.ul.children.length);
            })
        }, 2000)
    }
}