React onclick捕获获取元素值

Question

如何创建一个函数，在单击该数字时获取该数字的值？如果我点击 3 我想获得该值。

import { Pagination } from 'react-bootstrap';

function App() {

  

      const [count, setCount] = useState(0);

      

      function incrementCount() {

      setCount(prevCount => prevCount + 1)

      }

      function decrementCount() {

      setCount(prevCount => prevCount - 1)

      }

      let items = [];

      for (let number = 1; number <= 10; number++) {

        items.push(

          <Pagination.Item key={number} active={number === count + 1}>

            {number}

          </Pagination.Item>,

        );

      }

      const paginationBasic = (

          <div>

            <Pagination>

              <Pagination.Prev  onClick={decrementCount} />

              <Pagination>{items}</Pagination>

              <Pagination.Next onClick={incrementCount} />

            </Pagination>

          </div>

      );

  return (

      <div>

        <p>Hello Stack</p>

          {paginationBasic}

      

      </div>

  );

}

Answer 1

您可以添加onItemClick方法，并通过使用柯里化可以捕获该值：const onItemClick = page => event => {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; console.log({ page })&nbsp; &nbsp; &nbsp; &nbsp; setCount(page)&nbsp; &nbsp; &nbsp; }然后添加onClick每个项目for (let number = 1; number <= 10; number++) {&nbsp; &nbsp; &nbsp; &nbsp; items.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Item key={number} active={number === count + 1} onClick={onItemClick(number)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Pagination.Item>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }const { Pagination } = ReactBootstrap;function App() {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; const [count, setCount] = React.useState(0);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; function incrementCount() {&nbsp; &nbsp; &nbsp; setCount(prevCount => prevCount + 1)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; function decrementCount() {&nbsp; &nbsp; &nbsp; setCount(prevCount => prevCount - 1)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; const onItemClick = page => event => {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; console.log({ page })&nbsp; &nbsp; &nbsp; &nbsp; setCount(page)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; let items = [];&nbsp; &nbsp; &nbsp; for (let number = 1; number <= 10; number++) {&nbsp; &nbsp; &nbsp; &nbsp; items.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Item key={number} active={number === count + 1} onClick={onItemClick(number)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {number}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Pagination.Item>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; const paginationBasic = (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Prev&nbsp; onClick={decrementCount} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination>{items}</Pagination>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Next onClick={incrementCount} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Pagination>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p>Count {count}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {paginationBasic}&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; );}ReactDOM.render(<App />, document.getElementById('root'))<link&nbsp; rel="stylesheet"&nbsp; href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"&nbsp; integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"&nbsp; crossorigin="anonymous"/><div id="root"></div><script crossorigin src="https://unpkg.com/react@16.8/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16.8/umd/react-dom.production.min.js"></script><script&nbsp; src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"&nbsp; crossorigin></script>

Answer 2

我想这就是你想要实现的目标<Pagination.Item key={number}&nbsp;&nbsp; &nbsp;active={number === count + 1}&nbsp;&nbsp; &nbsp;onClick={setCount.bind(null, number)}>&nbsp; &nbsp; &nbsp; &nbsp; {number}</Pagination.Item>,

Answer 3

试试这个方法const pageChanged = (e) => {&nbsp; &nbsp;setCount(Number(e.target.text )- 1);}<Pagination onClick={pageChanged}>&nbsp; &nbsp; .......</Pagination>

Answer 4

您可以将onClick处理程序附加到Pagination.Item组件并将当前索引包含在回调中。我建议对页面项目进行零索引，这样您就不需要设置/比较 +/- 1。function App() {&nbsp; const [count, setCount] = useState(0);&nbsp; function incrementCount() {&nbsp; &nbsp; setCount((prevCount) => prevCount + 1);&nbsp; }&nbsp; function decrementCount() {&nbsp; &nbsp; setCount((prevCount) => prevCount - 1);&nbsp; }&nbsp; let items = [];&nbsp; for (let number = 0; number < 10; number++) { // <-- 0-index&nbsp; &nbsp; items.push(&nbsp; &nbsp; &nbsp; <Pagination.Item&nbsp; &nbsp; &nbsp; &nbsp; key={number}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setCount(number)} // <-- enclose current number/index value&nbsp; &nbsp; &nbsp; &nbsp; active={number === count} // <-- compare to current count value&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; {number + 1} // <-- transform data to displayable value&nbsp; &nbsp; &nbsp; </Pagination.Item>&nbsp; &nbsp; );&nbsp; }&nbsp; const paginationBasic = (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <Pagination>&nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Prev onClick={decrementCount} />&nbsp; &nbsp; &nbsp; &nbsp; {items}&nbsp; &nbsp; &nbsp; &nbsp; <Pagination.Next onClick={incrementCount} />&nbsp; &nbsp; &nbsp; </Pagination>&nbsp; &nbsp; </div>&nbsp; );&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <p>Hello Stack</p>&nbsp; &nbsp; &nbsp; {paginationBasic}&nbsp; &nbsp; </div>&nbsp; );}