React js Dom元素

Question

我是react js的新手，有一个关于DOM元素的问题。我的组件中有一个表。在鼠标悬停时，我想突出显示相应的单元格和行。我想要那个元素的坐标。例如，在悬停第四行的第三个单元格时，我希望result为{ r-4, c-3 }。我不想使用jquery来查找行的位置。我怎样才能达到这个结果呢？

Answer 1

您可以在componentDidMount中添加js本机代码，并对td使用e.target.cellIndex，对row使用e.target.rowIndex

const tds = window.document.getElementsByTagName("td");
for(var i = 0; i<= tds.length -1;i++){
    tds[i].addEventListener("mouseup", e => {
    console.log(`cell ${e.target.cellIndex +1}` , `Row : ${e.target.parentElement.rowIndex + 1}`);
  })
}

codepen的react中的实况演示：https://codepen.io/anon/pen/oJdjJW?editors=1010

希望我能帮到你

Answer 2

你不应该自己接触DOM，那样会扼杀react的目的

相反，您的事件侦听器应该在组件中表达，react将处理它们

在内部，这意味着react将在必要时调用addEventListener和removeEventListener以及其他有用的优化

首先，您的数据应该结构化为嵌套数组，然后映射到行和单元格

多亏了Array.prototype.map的强大功能，您可以访问行和单元格的索引

rows.map((row, rowIndex) => (
    <div>
      {row.map((cell, cellIndex) => (
        <div
          onClick={() => {
            console.log(`you clicked on ${rowIndex}, ${cellIndex}`)
          }}
        >
          {cell}
        </div>
      ))}
    </div>
  ))

以下是codesandbox https://codesandbox.io/s/6zw42m4pxw中的工作示例

Answer 3

您可以通过组合使用onMouseOver、setState和动态样式来实现这一点：

​

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null
        }
    }
    render() {
        return (
            <div>
                <p>User is hovering over ({this.state.x}, {this.state.y})</p>
                <table>
                    {(new Array(10)).fill().map((_, y) => (
                        <tr>
                            {(new Array(10).fill().map((_, x) => (
                                <td
                                onMouseEnter={() => this.setState({x,y})}
                                style={{backgroundColor: (this.state.x==x || this.state.y==y) ? 'red' : 'grey'}}
                                ></td>
                            )))}
                        </tr>
                    ))}
                </table>
            </div>
        )
    }
}

ReactDOM.render((<App/>), document.querySelector('#root'));

table {
  border-collapse: 'collapse'
}

td {
  padding: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

​