Question

是否有一个示例我们可以在不使用refs的情况下检索React元素的值？那可能吗？

var Test = React.createClass({

  handleClick: function() {
    alert(this.text);
  },
  render: function() {
    <div className="div1" onClick={this.handleClick}> HEkudsbdsu </div>
  }
})

Answer 1

我找到了一个合适的答案：

var Hello = React.createClass({
  handleClick: function(event) {
    alert(event.currentTarget.textContent);
  },
  render: function() {
    return <div className="div1" onClick={this.handleClick}> HEkudsbdsu </div>
  }
});

Answer 2

我想您可以使用ReactDOM.findDOMNode(this);获取DOM节点，然后从中获取innerText或其他任何内容。

var Hello = React.createClass({
  handleClick: function() {
    var domNode = ReactDOM.findDOMNode(this);
    alert(domNode.innerText);
  },
  render: function() {
    return <div className="div1" onClick={this.handleClick}> HEkudsbdsu </div>
  }
});

这有点像一种蠢蠢欲动的做法，但它会起作用。

请注意，在0.14 React之前，您只是使用React而不是ReactDOM。

Answer 3

试试这种方式。

handleMenuItemClick = (event) => {
  console.log(event.target.textContent);
};

<option onClick={event => this.handleMenuItemClick(event)}>
  item
</option>

Answer 4

如果要检索文本，请使用innerText属性，如果是html – innerHTML。

示例：

handleClick: function(e) {
  alert(e.currentTarget.innerHTML);
}

React - 在没有refs的情况下获取div的文本

4 个答案: