[react ] TextArea 光标定位到最后

Posted 2021-02-18 522040-m

记录：

使用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了_ !

打爆竹~~