时间戳

首页 > 解决方案 > JSX React：使用 ref 选择文本框中的所有内容

javascript - JSX React：使用 ref 选择文本框中的所有内容

问题描述

这是我目前拥有的。

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

这可行，但是在我的浏览器中，我在 handleClick 中不断收到此错误： Cannot read property 'current' of undefined.这是因为我在本地环境中使用了一些<Child>组件。<input>我已经尝试重命名 ref 以匹配父道具，如此处建议的https://stackoverflow.com/a/53241934/6312629，但这也没有用。

任何有关如何解决此问题的建议将不胜感激！

非常感谢！

标签： javascriptreactjsjsx

解决方案

如果您从一个新项目开始，我建议您尝试带有钩子的功能组件。

尝试自己设置 ref：


ref={ ref => {

this.textInput = ref

}}

推荐阅读