Question

我正在关注一个教程并尝试添加一些我自己的代码。我想在用户单击编辑时使文本区域中的所有文本都被选中。我无法这样做，因为无论我尝试什么都返回undefined。

selectText: function(){
    this.refs.newText.select();
},



renderNormal: function(){
            return (
                <div className="commentContainer">
                    <div className="commentText">{this.props.children}</div>
                    <button onClick={this.edit} className="button-primary">Edit</button>
                    <button onClick={this.remove} className="button-danger">Remove</button>
                </div>
            );
        }

Answer 1

如果你正在使用React＆lt; 14.0.0，您需要在getDOMNode()之前使用select()。这已在较新版本中进行了优化。这是React 0.13.3的一个例子。

class Example extends React.Component {
  constructor() {
    super();
    this.handleEdit = this.selectText.bind(this);
  }
  selectText() {
    this.refs.newText.getDOMNode().select();
  }
  render(){
    return (
      <div className="commentContainer">
        <textarea ref="newText" defaultValue="Hello World!"></textarea>
        <button className="button-success">Save</button>
        <button onClick={this.handleEdit}>Edit</button>
      </div>
    );
  }
}

React.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<div id="View"></div>

这是与React 15.1.0相同的例子。

class Example extends React.Component {
  constructor() {
    super();
    this.newText = {};
    this.handleEdit = this.selectText.bind(this);
  }
  selectText() {
    this.newText.select();
  }
  render(){
    return (
      <div className="commentContainer">
        <textarea ref={(newText) => this.newText = newText} defaultValue="Hello World!"></textarea>
        <button className="button-success">Save</button>
        <button onClick={this.handleEdit}>Edit</button>
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

Answer 2

当我查看你的代码时，你没有任何textarea，也没有为ref newText分配任何元素 - 你在这里错过了一些代码吗？要访问this.refs.newText，您需要在渲染时为其中一个元素分配ref="newText"。 Fabian Schultz的另一个答案显示了在渲染方法中正确使用ref赋值。

React：如何选择textarea中的所有文本

2 个答案: