使用 map() 函数 onClick (ReactJS) 循环遍历数组

Question

我想创建一个在用户单击“下一步”按钮时更改内容的向导。

我目前正在尝试使用 .map 函数，它可以工作，但是如何调整我的代码以循环遍历数组 onClick 中的每个步骤？

目前，我的代码仅显示 3 个单独的输入以及数组中的所有步骤，我想要做的是遍历每个步骤 onClick。

这是我的代码示例：

数组：

const wizardControls = {
    steps: [
        {
            step: 1,
            name: 'name1',
            type: 'text',
            placeholder: 'name1',
        },
        {
            step: 2,
            name: 'name2',
            type: 'text',
            placeholder: 'name2',
        },
        {
            step: 3,
            name: 'name3',
            type: 'text',
            placeholder: 'name3',
        },
    ],
};

JSX 使用 map() 函数：

    {steps.map((step, index) => (
        <div key={index}>
            <input
                value={value}
                name={step.name}
                type={step.type}
                placeholder={step.placeholder}
                onChange={onChange}
            />
        </div>
    ))}

我认为按钮需要一个处理函数来循环索引，但是我不确定如何使用 map() 函数来做到这一点。

如果 map() 函数不是最佳路径，我愿意接受更好的方法。

Answer 1

您可以做到这一点的一种方法是根据您所处的步骤（基于索引）进行切片。

这是一个示例，说明您的代码可能会是什么样子。

const [step, setStep] = useState(1)

...

steps.slice(step - 1, step).map((step, index) => (
  ...
))

在此处查看工作示例：https://codesandbox.io/s/pensive-northcutt-el9w6

Answer 2

如果您想一次显示一个步骤，请不要使用Array.map() 来渲染所有步骤。使用useState 保存当前索引（步骤），并通过索引从steps 数组中获取当前项。要跳到下一步，请将索引增加 1。

const { useState } = React;

const Demo = ({ steps }) => {
  const [index, setIndex] = useState(0);
  const [values, setValue] = useState([]);
  
  const next = () => 
    setIndex(step => step < steps.length -1 ? step + 1 : step);
  
  const onChange = e => {
    const val = e.target.value;
    
    setValue(v => {
      const state = [...v];
      
      state[index] = val;
      
      return state;
    })
  };
  
  const step = steps[index];

  return (
    <div>
        <input
            value={values[index] || ''}
            name={step.name}
            type={step.type}
            placeholder={step.placeholder}
            onChange={onChange}
        />
        
        <button onClick={next}>Next</button>
    </div>
  );
};

const wizardControls = {"steps":[{"step":1,"name":"name1","type":"text","placeholder":"name1"},{"step":2,"name":"name2","type":"text","placeholder":"name2"},{"step":3,"name":"name3","type":"text","placeholder":"name3"}]};

ReactDOM.render(
  <Demo steps={wizardControls.steps} />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

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