Question

来自jQuery，获得点击的元素很容易，但是我在React中遇到了一些问题。基本上，我有一个列表，我想要一个被单击的列表项（或其索引）并对它进行动画处理。

class TodoApp extends React.Component {
  constructor(props) 
  {
    super(props)
    this.list_element = React.createRef()
    this.state = 
    {
        items: [
        { text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
 get_index ()
 {
     console.log(this.list_element.current.children)
 }
  render() {
    return (

        <ol ref={this.list_element}>
        {this.state.items.map(item => (
          <li onClick={ () => this.get_index()}>
              <span>{item.text}</span>
          </li>
        ))}
        </ol>
    )
  }
}

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

实时演示：https://jsfiddle.net/uo1L03ng/

但是，我不知道如何在React中获得被点击的元素。我应该改用componentDidMount（）并使用普通的JavaScript来获取被单击的元素和将来的DOM操作吗？

什么是最好的方法？

Answer 1

在onClick数组上进行映射时，可以将参数传递给items处理程序。 Array.prototype.map()还使您可以访问元素的索引，因此，可以将其传递给doSomething()方法。

这里有CodeSandbox可以尝试使用！

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.list_element = React.createRef()
    this.state = {
      items: [
        { text: 'Learn JavaScript', done: false },
        { text: 'Learn React', done: false },
        { text: 'Play around in JSFiddle', done: true },
        { text: 'Build something awesome', done: true }
      ]
    }
  }

  doSomething(item, index) {
    console.log(item)
    console.log(index)
  }

  render() {
    return (
      <ol>
        {this.state.items.map((item, index) => (
          <li key={item.text} onClick={() => this.doSomething(item, index)}>
            <span>{item.text}</span>
          </li>
        ))}
      </ol>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector('#app'))

Answer 2

您可以在item函数中将onClick作为参数传递。并且您应该为key标签使用<li>属性，否则，您将获得Warning: Each child in a list should have a unique "key" prop.并使用e.currentTarget与DOM元素进行交互。

get_index(e, item) {
  console.log(e.currentTarget); // <li>
  console.log(item);
}
render() {
  return (
    <ol>
      {this.state.items.map((item, index) => (
        <li key={index} onClick={e => this.get_index(e, item)}>
          <span>{item.text}</span>
        </li>
      ))}
    </ol>
  );
}

如何在React中获得点击的元素？

2 个答案: