使用React选择一个可信的HTML元素的文本

Question

我正在使用contenteditable处理EditableLabel React组件（带有Typescript）。我正在尝试选择整个文本（类似于this example），但它应该在用户关注文本时发生，作为内联编辑。

我以为我可以做this.domElm.current.select()，类似于我对document.getElementById('myid').select()所做的，但它不起作用。

它在onFocus方法失败了。

import * as React from 'react'   

export class EditableLabel extends React.Component<EditableLabelProps, EditableLabelState> {

  private domElm: React.RefObject<HTMLSelectElement>

  constructor(props: EditableLabelProps) {
    super(props)
    this.state = {
      editing: false
    }
    this.domElm = React.createRef()
  } 

  toggleEdit = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation()
    if (!this.state.editing) {
      this.edit()
    }
  }

  onFocus = (e: any) => {
    // this fails.
    this.domElm.current.select()
  }

  edit = () => {
    this.setState(
      {
        editing: true
      },
      () => {
        this.domElm.current.focus()
      }
    )
  }

  save = () => {
    this.setState(
      {
        editing: false
      },
      () => {
        if (this.isValueChanged()) {
          this.props.onsave(this.domElm.current.textContent)
        } else {
          // 
        }
      }
    )
  }

  cancel = () => {
    this.setState({
      editing: false
    })
  }

  isValueChanged = () => {
    return this.props.value !== this.domElm.current.textContent
  }

  handleKeyDown = (e: any) => {
    const { key } = e
    switch (key) {
      case "Enter":
      case "Escape":
        this.save()
        break
    }
  }

  render() {
    let editonclick = true
    const { editing } = this.state
    if (this.props.editonclick !== undefined) {
      editonclick = this.props.editonclick
    }

    return (          
        <this.props.htmltag              
          suppressContentEditableWarning={true}          
          contentEditable={editing}
          ref={this.domElm}
          onBlur={this.save}
          onKeyDown={this.handleKeyDown}
          onClick={this.toggleEdit}
          onFocus={this.onFocus}
          {...this.props}
        >
          {this.props.value}
        </this.props.htmltag>                       
    )
  }
}

控制台跟踪：

`EditableLabel.tsx:17 console.trace
EditableLabel._this.onFocus @ EditableLabel.tsx:17
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4476
batchedUpdates$1 @ react-dom.development.js:16659
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4555
interactiveUpdates$1 @ react-dom.development.js:16714
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
(anonymous) @ EditableLabel.tsx:24
callCallback @ react-dom.development.js:10878
commitUpdateQueue @ react-dom.development.js:10911
commitLifeCycles @ react-dom.development.js:14377
commitAllLifeCycles @ react-dom.development.js:15462
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15603
completeRoot @ react-dom.development.js:16618
performWorkOnRoot @ react-dom.development.js:16563
performWork @ react-dom.development.js:16482
performSyncWork @ react-dom.development.js:16454
interactiveUpdates$1 @ react-dom.development.js:16719
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4532
2EditableLabel.tsx:18 Uncaught TypeError: _this.domElm.current.select is not a function
    at EditableLabel._this.onFocus (EditableLabel.tsx:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)`

Answer 1

在你的onFocus函数中尝试使用：e.target.select（）而不是使用ref来处理选择。