下一步和后退按钮功能不起作用？答案

【问题标题】：Next and Back button functionality not working?下一步和后退按钮功能不起作用？
【发布时间】：2023-01-22 00:40:56
【问题描述】：

单击下一个和后退按钮我将显示三个页面，默认情况下将显示第一页（ExternalDamage）并单击 NEXT 将显示第二页并且 BACK 按钮将转到最后一页，但它不会更新国家？我需要使用状态来更新数组索引的计数，但它不更新索引

    /* eslint-disable consistent-return */
import React, { useState } from 'react';
// import classnames from 'classnames';
import ScreenDamage from './ScreenDamage';
import Battery from './Battery';
import ExternalDamage from './ExternalDamage';
import Footer from './Footer';
import styles from './manualCheck.module.scss';
import VerticalSpacing from '../../core/VerticalSpacing/VerticalSpacing';
// import AdditionalChecks from './AdditionalChecks'


const ManualCheck = () => {
  const [index, setIndex] = useState(0);

  const item = [
    <ExternalDamage />,
    <ScreenDamage />,
    <Battery />,
  ];

  const handleBackButton = () => {
    if (index !== 0) {
      setIndex(index - 1);
      console.log(index);
    }
  };

  const handleNextButton = () => {
    setIndex(index + 1);
    console.log(index);
  };

  return (
    <div>
      {item[index]}
        <div className={styles.footer}>
          <VerticalSpacing size={ABLE_SPACING_SIZE.spacing2x} />
            {/* eslint-disable jsx-a11y/anchor-is-valid */}
            <a
              href="#"
              onClick={() => handleBackButton()}
            >
              Back
            </a>
            {/* eslint-enable jsx-a11y/anchor-is-valid */}
            {/* eslint-disable jsx-a11y/anchor-is-valid */}
            <a
              href="#"
              onClick={() => handleNextButton()}
            >
              Next
            </a>
            {/* eslint-enable jsx-a11y/anchor-is-valid */}
        </div>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing15x} />
    </div>
  );
};

export default ManualCheck;

【问题讨论】：

什么是 <InlineLink> ？并且您是否正确创建了包装函数？

标签： javascript reactjs

【解决方案1】：

您需要在 handleBackButton() 和 handleNextButton() 中添加一个 e.preventDefault() ：

const handleBackButton = (e) => {
  e.preventDefault();
  if (index !== 0) {
    setIndex(index - 1);
    console.log(index);
  }
};

const handleNextButton = (e) => {
  e.preventDefault();
  setIndex(index + 1);
  console.log(index);
};

以下链接可能会帮助您完成任务：

Anchor tag calling the onClick function React

【讨论】：

【解决方案2】：

那么您的代码可以改进如下：

首先，您没有向函数传递任何参数，因此您应该使用onClick，如下所示：

<a
  href="#"
  onClick={handleBackButton}>
   Back
</a>
<a href="#"
   onClick={handleNextButton}
>
  Next
</a>

您的状态也取决于之前的状态。因此，为了确保您获得最新的快照，您必须按以下方式更新您的状态：

const handleBackButton = (e) => {
 e.preventDefault();
 if (index !== 0) {
  setIndex(prevIndex => prevIndex - 1);
  console.log(index);
 }
};

const handleNextButton = (e) => {
  e.preventDefault();
  setIndex(prevIndex => prevIndex + 1);
  console.log(index);
};

【讨论】：