JSX React: выбрать все содержимое в текстовом поле, используя ref

Question

Вот что у меня сейчас есть.

class App extends React.Component {
    constructor(props) {
      super(props)

      this.textInput = React.createRef();
      this.state = {
        value: 'select all on click'
      }
    }

  handleClick = e => {
    e.preventDefault();
    this.setState({ value: this.textInput.current.select()})
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.textInput}
          value={this.state.value}
          onClick={this.handleClick}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

https://codepen.io/gogreenish/pen/MWaJamW

Это работает, но в моем браузере я получаю эту ошибку в handleClick: Cannot read property 'current' of undefined. Это потому, что я использую некоторый <Child> компонент вместо <input> в моей локальной среде. Я попытался переименовать ссылку, чтобы она соответствовала родительской пропе, как предложено здесь { ссылка }, но это также не сработало.

Будем весьма благодарны за любые предложения относительно решения этой проблемы!

Большое спасибо!

Answer 1

Для дочерних компонентов реагирования ссылка просто должна быть перенаправлена ​​дочернему элементу и передана фактическому вводу, потому что ссылки не обрабатываются как реквизиты (аналогично тому, как ключи обрабатываются по-разному). Таким образом, вы можете использовать React.forwardRef, чтобы извлечь ссылку и передать ее как опору ребенку. Для вас это может выглядеть примерно так, но вы можете найти более подходящее решение здесь: https://reactjs.org/docs/forwarding-refs.html#forwarding -refs-to-dom-components

// App.js
class App extends React.Component {
    ...

    render() {
        return (
           <Child
              ref={this.textInput}
              handleClick={this.handleClick}
              value={this.state.value}
           />
        );
    }
}

// Child.js
class Child extends React.Component {
    render() {
        return (
          <div>
            <input type="text" ref={this.props.forwardedRef}
              value={this.props.value}
              onClick={this.props.handleClick}/>
          </div>
        );
    }
}

export default React.forwardRef((props, ref) => (
    <Child forwardedRef={ref} {...props} />
));

Answer 2

Если вы начинаете с нового проекта, я предлагаю попробовать функциональные компоненты с зацепками.

Попробуйте установить ref самостоятельно:

ref={ ref => {

this.textInput = ref

}}