React - 在没有参考的情况下点击获取 div 的文本答案

【问题标题】：React - Get text of div on click without refsReact - 在没有参考的情况下点击获取 div 的文本
【发布时间】：2016-07-24 16:33:31
【问题描述】：

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

var Test = React.createClass({

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

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

我找到了一个可行的答案：

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

【讨论】：

这对我不起作用，但 @Ikram - Ud - Daula 的回答对我有用 stackoverflow.com/a/50894853/5305519
应该是event.target.textContent React API 中不存在 currentTarget

【解决方案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。

【讨论】：

似乎不起作用。我在警报中得到一个未定义的
@AshwinVenkataraman 你运行的是什么版本的 React？如果是当前版本，则需要在组件中导入ReactDOM。
我正在运行最新版本。我正在使用此链接导入脚本文件：cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js，对于 React-dom - cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js
@AshwinVenkataraman 当你 console.log 退出 domNode 时会发生什么？节点是否可找到？有文字吗？你能提供更多关于这里缺少什么的信息吗？

【解决方案3】：

试试这个方法。

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

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

【讨论】：

【解决方案4】：

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

例子：

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

【讨论】：