[react ] TextArea 光標定位到最后

記錄：

使用React.createRef()方法（React 16.3+）

，創建一個ref, 使用一個變量存儲。然后把ref掛載在dom節點上，通過current拿到該實例 -- dom節點信息，然后就可以使用原生dom的api方法

1.constructor下 將ref賦值給一個變量

 this.diagInput = React.createRef();

　使用場景 antd table組件中的行編輯：

把這個ref綁定在需作用的dom節點上 （Columns下）

{
                    align: "center",
                    title: '模板內容',
                    dataIndex: 'templet',
                    key: 'templet',
                    editable: true,
                    render: (text, record, index) => {
                        if (record.editable) {
                            return (
                                <TextArea ref={this.diagInput} id={record.key}  value={text} onChange={(e) => this.handleFieldChange(e, 'templet', record.key)} />
                            )
                        } if (!record.editable) {
                            return (
                                <TextArea readOnly id={record.key} style={{ resize: "none", border: "0" }} value={text} />
                            )
                        }
                        return text;
                    },
                },

    {

                    title: '操作',

                    dataIndex: 'operation',

                    key: 'action',

                    align: "center",

                    key: 'operation',

                    width: 80,

                    render: (text, record, index) => {

                        if (record.isAdd) {

                            return (

                                <span style={{ textAlign: "center" }}>

                                    <a style={{ color: "red" }} onClick={(e) => this.cut(e, record.key)}>刪除</a>

                                </span>

                            )

                        }

                        if (!record.editable) {

                            return (

                                <span style={{ textAlign: "center" }}>

                                    <a onClick={(e) => this.toggleEditable(e, record.ID, record)}>編輯</a>

                                </span>

                            )

                        } else {

                            return (

                                <span style={{ textAlign: "center" }}>

                                    <a onClick={(e) => this.cancel(e, record.key)}>取消</a>

                                </span>

                            )

                        }

                    }

                }

d點擊編輯時 設置光標進入 fouce  

 this.diagInput.current.focus();

　發現光標雖然進入 但是並沒有到文本最后 ，一直在開頭

 

 

 設置延時無果 增長延時無果  將TextArea標簽換成Input 奏效 ---實際場景需用到文本 input不妥   一山不通 另山通

   setTimeout(() => {
                this.diagInput.current.focus();
            }, 300)

h換一種方法 直接獲取到當前dom節點 通過光標事件  將光標定位到內容最后

getFocusDom 方法---接收參數 (參數需要拿到當前編輯的那行dom 根據需求 定義是否要傳) 我這是通過 document.getElementById(record.key)獲取當前dom

 Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。要獲取用於檢查或修改的Selection對象，請使用window.getSelection()

 selectionSatrt記錄鼠標點擊的開始位置，selectionEnd記錄結束位置

setSelectionRange 更新光標位置

//光標定位到文本最后 
        getFocusDom = (e, record) => {
            var fDOM = document.getElementById(record.key);
            var len = record.templet.length;
            this.setSelectionRange(fDOM, len, len);
        }
        setSelectionRange = (input, selectionStart, selectionEnd) => {
            if (input.setSelectionRange) {
                input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            }
            else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd('character', selectionEnd);
                range.moveStart('character', selectionStart);
                range.select();
            }
        }

　　

o了_ !

打爆竹~~