react的refs屬性

refs

字元串形式refs-過時了

// ref key為自命名內容, value為節點 input
        class Demo extends React.Component {
            showData = () => {
                // 拿到的是真實DOM
                const { input1 } = this.refs;
                alert(input1.value);
            }
            showData2 = () => {
                const { input2 } = this.refs;
                alert(input2.value);
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="點擊按鈕提示數據" /> &nbsp;
                        <button onClick={this.showData}>點我提示</button>&nbsp;
                        <input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦點提示" />
                    </div>
                )
            }
        }

回調函數形式refs

// 回調函數中c是當前節點,this.input1的Demo實例的屬性
        class Demo extends React.Component {
            showData = () => {
                // 拿到的是真實DOM
                const { input1 } = this;
                alert(input1.value);
            }
            showData2 = () => {
                const { input2 } = this;
                alert(input2.value);
            }
            // 直接調用
            showInfo = (c) => {
                this.input2 = c;
            }
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} type="text" placeholder="點擊按鈕提示數據" /> &nbsp;
                        <button onClick={this.showData}>點我提示</button>&nbsp;
                        <input ref={this.showInfo} onBlur={this.showData2} type="text" placeholder="失去焦點提示" />
                    </div>
                )
            }
        }

createRef

        class Demo extends React.Component {
            // React.createRef 調用後可以返回一個容器,該容器可以存儲被ref所表示的節點
            // 即創建一個容器,將input節點放入容器中
            // 一個容器存一個節點
            myRef = React.createRef();
            showData = () => {
                // 拿到的是真實DOM
                const value = this.myRef.current.value;
                alert(value);
            }
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="點擊按鈕提示數據" /> &nbsp;
                        <button onClick={this.showData}>點我提示</button>&nbsp;
                    </div>
                )
            }
        }