javascript - 如何使用状态而不是引用来设置文本区域的选择？

Question

我正在使用 react 引用设置文本区域的选择范围，但这与 react “方式”相矛盾。

裁判工作完美。

我想使用状态设置文本区域的 selectionRange，而不是 ref(就像在这个代码片段中一样)

import React, { Component } from 'react';

export default class App extends Component {

  constructor() {
    super();

    this.state = {
      value:"some placeholder text",
    }

    this.textareaRef = React.createRef();
  }

  handleChange=({ target : { value : text } })=>{
   this.setState({value : text});
  };

  componentDidMount(){
    // setting the cursor position to the end of text on mount .
    const textareaObj = textareaRef.current;
    const cursor_pos = this.state.value.length;

    textareaObj.setSelectionRange(cursor_pos , cursor_pos );
    textareaObj.focus();
  }

  render(){
    return (
    <textarea 
      value={this.state.value} 
      onChange={this.handleChange}
      ref={textareaRef}>
    </textarea>
    );
  }
}

Answer 1

你要做的是设置selectionStart和 selectionEnd使用 state 的文本区域属性不使用refs ？像这样:

render(){
  const { value } = this.state;
  const startingPoint = 0;
  return (
    <textarea 
      value={this.state.value} 
      selectionStart={startingPoint}
      selectionEnd={startingPoint + value.length}
    </textarea>
  );
}

但是目前还不行，大家可以看看所有<textarea>的属性 here .所以在这种情况下使用 refs 是完全没问题的。