单击React js中的按钮时如何获取innerHTML？

Question

我正在尝试使用material-ui-flat-pagination。由于在单击上一个或下一个按钮时，库似乎不提供页码，因此我试图自己获取该值。它仅提供一个onClick道具，所以我使用event.target来获取我点击的值。

event.target显示了上面的标签，我需要span标签内的值3。我如何在React js中获得价值？我是否正在以正确的方式使用库material-ui-flat-pagination获取页码？

Answer 1

对不起，我没有添加评论，但我没有声誉。 x会记录您要查询的号码，但不要尝试使用x原因来更新偏移量，原因是在模块的core.ts上定义了偏移量计算。

export const getOffset = (page: number, limit: number): number => { const offset = (page - 1) * limit; return offset < 0 ? 0 : offset; };

尽管您可以尝试通过解析事件来获取所需的HTML。一种技巧是将案例与界面提供的参数相匹配，例如下一个或上一个标签

e.target.innerText
e.currentTarget.childNodes[0].innerText

*请记住，它是一个字符串，请注意您的数字比较

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Pagination from "material-ui-flat-pagination";

const theme = createMuiTheme();

class Example extends React.Component {
constructor(props) {
    super(props);
    this.state = { offset: 0, limit: 3, total: 132, calc: 1, nlabel: ">>", plabel: "<<" };
}

handleClick(e, offset) {
    let y = e.target.innerText; 
    //let y =e.currentTarget.childNodes[0].innerText;

    if (y === this.state.plabel) y = Number(this.state.calc) - 1;
    if (y === this.state.nlabel) y = Number(this.state.calc) + 1;
    let x = offset / this.state.limit + 1;
    console.log("x:" + x + " - y:" + y);
    this.setState({ offset, calc: y });
}

render() {
    return (
        <MuiThemeProvider theme={theme}>
            <div>{this.state.offset}</div>
            <div>{this.state.calc}</div>
            <CssBaseline />
            <Pagination
                limit={this.state.limit}
                offset={this.state.offset}
                total={this.state.total}
                onClick={(e, offset) => this.handleClick(e, offset)}
                nextPageLabel={this.state.nlabel}
                previousPageLabel={this.state.plabel}
            />
        </MuiThemeProvider>
    );
}
}

ReactDOM.render(<Example />, document.getElementById("root"));