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

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

0 голосов
/ 11 февраля 2019

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

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

Я хочу установить выборочную область текстовой области.используя состояние, а не ссылку (как в этом фрагменте кода) 

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>
    );
  }
}

Ответы [ 3 ]

0 голосов
/ 11 февраля 2019

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

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();
  }
}
0 голосов
/ 11 февраля 2019

Что вы хотите сделать, это установить 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> здесь .Таким образом, использование ссылок в этом случае совершенно нормально.

0 голосов
/ 11 февраля 2019

Вы хотите создать «управляемый» компонент , поскольку в 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, как вы можете видеть в конструкторе.

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

...