Question

所以我试图在react中的div属性中检索数据。 JSFiddle显示了我遇到的问题。事件触发后，this.state.value设置为空字符串。

在阅读another stack overflow post之后，我开始使用div的data- *属性，但是我无法使用jQuery，所以我切换到了id。有什么想法吗？

class GettingAttributes extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: 'Hello!'};

    this.bar = this.bar.bind(this);
  }

  bar(e){
    this.setState({value: e.target.id})
  }

  render() {
    return (
      <div id="foo" onClick={this.bar}>
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Answer 1

使用

e.target.id

代替

(defn click-me
  []
  (let [clicked (reagent/atom false)]
    (fn []
      (if @clicked
        [:input {:type "text"
                 :auto-focus true
                 :on-blur #(reset! clicked false)}]
        [:div {:on-click #(reset! clicked true)}
         "Click me."]))))

.currentTarget将定位实际包含事件侦听器的元素。在您的情况下，.target是带有文本的p标记，在您的状态下没有要设置的ID。

Answer 2

您可以通过id以及data-*属性来实现。但是首选方法是使用data-*属性。

请考虑您的解决方案的this JSFiddle链接。

您应该在要从中提取数据的元素上设置ref，然后可以使用它将数据设置为状态。 IN代码中，如果将onClick={this.bar}替换为onClick={this.barById}，则代码将从id提取数据，而在前一种情况下，它将从data-*属性提取数据。

Answer 3

之所以无法选择id属性，是因为当前的e.target是<div>（即<p>）的子元素。这是一个可行的建议解决方案：

class GettingAttributes extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: 'Hello!'};

    this.bar = this.bar.bind(this);
  }

  bar(e){
    this.setState({value: e.target.id})
  }

  render() {

    return (
      <div id="foo" onClick={this.bar}>
        {this.state.value}
      </div>
    );
  }
}

ReactDOM.render(<GettingAttributes />, document.querySelector("#app"))

您也可以通过将点击处理程序添加到<p>元素中来解决此问题：

  <div >
    <p id="foo" onClick={this.bar}>{this.state.value}</p>
  </div>

使用e.currentTarget.id可以快速解决您的问题，只需知道currentTarget代表什么，而不是单独Target。祝好运！

从React.js中的div获取ID

3 个答案: