Как установить позицию курсора внутри Textarea в ReactJs?

Question

Как установить позицию курсора внутри Textarea в ReactJs?

1

Есть ли способ программно установить положение курсора внутри текстовой области?

Мой вариант использования - пометка пользователей.

Когда пользователь вводит @tar, я показываю предложения, пользователь нажимает на одно из них (например, @tarik), но фокус будет потерян, что и ожидается. Мне нужно вернуть фокус на конкретную позицию, которую я умею рассчитывать.

Я использую Textarea от react-textarea-autosize Textarea react-textarea-autosize

Я определяю мою ссылку в конструкторе:

 this.textareaInput = React.createRef();

Я назначаю компонент для ref:

 <Textarea
                ref={this.textareaInput}
                rows={1}
                value={comment}
                onChange={this.handleInputChanged}
                tabIndex={tabIndex || 0}
              />

И с этой строкой, я должен быть в состоянии манипулировать с позиции курсора, но я не.

this.textareaInput.current._ref.focus();    
this.textareaInput.current._ref.selectionStart = 1;

или же

 this.textareaInput.current._ref.focus(); 
 this.textareaInput.current._ref.selectionEnd = 3;

Ни один из этих примеров не работает.

ПРИМЕЧАНИЕ: жестко закодированные значения используются только для проверки кода.

Я пытался использовать метод setSelectionRange тоже безуспешно.

TariqN 14 дек. 2018, в 16:46

Источник

0

На что _ref ссылается _ref ?
jmargolisvt 14 дек. 2018, в 15:50
0

Это единственный способ, которым я могу использовать метод focus (). Я думаю, что ссылка дополнительно инкапсулирована из-за внешнего компонента.
TariqN 14 дек. 2018, в 15:58

Теги:

javascript

reactjs

3 ответа

Ещё вопросы

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

TariqN · Answer 1 · 2018-12-17T08-48-00.000Z

Я нашел решение, устанавливающее и selectionStart и selectionEnd на одно и то же значение.

i_th · Answer 2 · 2018-12-14T15-13-00.000Z

Попробуй это:

HTML:

<div id="container">
    <!-- This element contents will be replaced with your component. -->
</div>

Реагировать-JSX:

 class TodoApp extends React.Component {

       constructor(props){
         super(props);
         this.state = {
            scriptString: ''
         };
       }
       handleKeyDown(event) {
          if (event.keyCode === 9) { // tab was pressed
              event.preventDefault();
              var val = this.state.scriptString,
                  start = event.target.selectionStart,
                  end = event.target.selectionEnd;

              this.setState({"scriptString": val.substring(0, start) + '\t' + val.substring(end)}, () => this.refs.input.selectionStart = this.refs.input.selectionEnd = start + 1);
          }
      }
      onScriptChange(event) {
         this.setState({scriptString: event.target.value});
      }
      render() {
          return (
              <textarea rows="30" cols="100" autofocus="true"
                        ref={this.textareaInput}
                        rows={1}
                        onFocus={ this.onFocus } 
                        onKeyDown={this.handleKeyDown.bind(this)}
                        onChange={this.onScriptChange.bind(this)} 
                        value={this.state.scriptString}/>



          );
      }
    }

    ReactDOM.render(
      <TodoApp />,
      document.getElementById('container')
    );

Andrew Yazura · Answer 3 · 2018-12-14T13-27-00.000Z

Я думаю, проблема в том, что в пользовательском блоке <Textarea> нет метода .focus().

Вы можете попробовать этот код:

import TextareaAutosize from 'react-textarea-autosize'

class MyComponent extends React.Component {
    componentDidMount() {
        this.inputRef.focus()
    }

    inputRef = ref => (this.inputRef = ref)

    render() {
        return <TextareaAutosize inputRef={this.inputRef} />
    }
}

Найдено на GitHub