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

Question

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

我目前正在尝试使用.map function，它可以工作，但是如何调整我的代码以循环遍历数组 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() function：

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

我认为该按钮将需要一个处理程序 function 来循环索引，但是，我不确定如何使用 map() function 执行此操作。

如果 map() function 不是最佳路线，我愿意采用更好的方法。

Answer 1

如果您想一次显示一个步骤，请不要使用Array.map()来渲染所有步骤。 使用useState来保存当前索引（step），并通过索引从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>

Answer 2

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

这是您的代码可能看起来像的示例。

const [step, setStep] = useState(1)

...

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

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