Как установить выбор textarea в реагировать, используя состояние вместо ссылки?

Question

Я устанавливаю выборочный диапазон textarea с использованием ссылки на реакцию, но это противоречит "способу" реакции.

ссылка работает отлично.

я хочу установить selectionRange textarea, используя состояние, а не 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 свойства textarea с использованием state без использования refs? Что-то вроде этого:

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

Но в настоящее время это невозможно, вы можете посмотреть на все <textarea>свойства здесь. Таким образом, использование ссылок в этом случае совершенно нормально.

Answer 2

Вы хотите создать "контролируемый" компонент, так как в React следует контролировать состояние элемента, а не DOM.

Вы на полпути, просто пара твиков: https://jsfiddle.net/tombarton/2s5q398c/3/

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        inputValue: 'Here is some content...'
    }
    this.onTextareaChange = this.onTextareaChange.bind(this);
  }

  onTextareaChange(e) {
    const { value } = e.target;
    this.setState(state => ({
        ...state,
      inputValue: value,
    }))
  }

  render() {
    return (
      <div>
        <textarea value={this.state.inputValue} onChange={this.onTextareaChange} />
      </div>
    )
  }
}

ReactDOM.render(<TextArea />, document.querySelector("#app"))

Как видите, мы присваиваем значение из состояния компонента value атрибут textarea элемент. Для завершения процесса мы назначаем метод для обновления состояния до onChange атрибут элемента. Когда onChange событие запускается, оно передается в наш метод, мы извлекаем обновленное значение и обновляем состояние нашего компонента. Поскольку мы передаем наш метод за пределы класса, мы должны связать this к нему, как вы можете видеть в конструкторе.

Надеюсь, это поможет.

Answer 3

Я вижу это так:

export default class App extends Component {

  constructor() {
    super();

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

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

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

  setCursorPos = (textarea) => {
    const cursor_pos = this.state.value.length;

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