物料ui的步进器中的map方法迭代 [英] map method iteration in stepper for material ui
问题描述
- 我正在尝试在我的步进器中添加redux表单。
- 但问题是我是否在所有三个地方的反映中添加了表单字段。
- 所以我开始调试步进器代码。
- 发现他们正在迭代map方法。
- 所以我认为根据标签的条件我会显示div和表格标签。
- 但它不起作用。
- 你能不能告诉我如何修复它。
- 以便将来我自己修复它。
- 在下面提供我的代码片段和沙箱
- I am trying to add the redux form inside my stepper.
- but the problem is if I add form fields inside its reflecting in all the three places.
- so I started debugging the stepper code.
- found that they are iterating in map method.
- so I thought on basis of putting if condition for label I will show the div and form tags.
- but its not working.
- can you tell me how to fix it.
- so that in future I will fix it myself.
- providing my code snippet and sandbox below
https://codesandbox.io / s / y2kjpl343z
return (
<div className={classes.root}>
<Stepper activeStep={activeStep} orientation="vertical">
{steps.map((label, index) => {
console.log("steps---->", steps);
console.log("label---->", label);
console.log("index---->", index);
// if (index === 0) {
if (label === "Select campaign settings") {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{getStepContent(index)}</Typography>
<div className={classes.actionsContainer}>
<div>
<div>test1</div>
<form>here</form>
<Button
disabled={activeStep === 0}
onClick={this.handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</div>
</div>
</StepContent>
</Step>
);
}
if (label === "Create an ad group") {
return (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<Typography>{getStepContent(index)}</Typography>
<div className={classes.actionsContainer}>
<div>
<div>test1</div>
<form>here</form>
<Button
disabled={activeStep === 0}
onClick={this.handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={this.handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</div>
</div>
</StepContent>
</Step>
);
}
// return (
// <Step key={label}>
// <StepLabel>{label}</StepLabel>
// <StepContent>
// <Typography>{getStepContent(index)}</Typography>
// <div className={classes.actionsContainer}>
// <div>
// <div>test1</div>
// <form>here</form>
// <Button
// disabled={activeStep === 0}
// onClick={this.handleBack}
// className={classes.button}
// >
// Back
// </Button>
// <Button
// variant="contained"
// color="primary"
// onClick={this.handleNext}
// className={classes.button}
// >
// {activeStep === steps.length - 1 ? "Finish" : "Next"}
// </Button>
// </div>
// </div>
// </StepContent>
// </Step>
// );
})}
</Stepper>
{activeStep === steps.length && (
<Paper square elevation={0} className={classes.resetContainer}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={this.handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</div>
);
推荐答案
这是一个有效的代码框： https://codesandbox.io/s/6l3wpo3xyr
Here is a working codesandbox: https://codesandbox.io/s/6l3wpo3xyr
To我，似乎工作正常，代码清晰。它可以做得更好，但首先，它可能没问题。
To me, it seems that is working properly and with clear code. It can be done a bit better but to start with, it may be ok.
如果需要，我可以编辑答案以添加细节。
I can edit the answer to add details if needed.
作为组件的实例变量我声明：
As an instance variable for the component I declared:
steps = {
"Select campaign settings": Step1,
"Create an ad group": Step2,
"Create an ad": Step3
};
这只是一个简单的Javascript对象。在ES6中， Object 类具有entries方法，该方法采用类似于此的对象，返回一个数组，其中包含给定对象的键和值数组。在这种情况下：
This is just a Plain Javascript Object. In ES6 the Object class has the entries method that, taken an object like this one, returns an array an array of key and values of the given object. In this case:
Object.entries(steps)
[
[ "Select campaign settings", Step1 ],
[ "Create an ad group", Step2 ],
[ "Create an ad", Step3 ]
]
拥有这样的结构，使用 map 更容易映射键值对。 Array 类的 map 方法的第一个参数是数组的当前元素。之前使用过 Object.entries ，该元素是代表密钥对的单个数组：
Having such a structure, it's easier to map through the key-value pairs with map. The first argument of the map method of the Array class is the current element of the array. Having used Object.entries earlier, the element is the single array that represents a key-pair:
Object.entries(steps)[0] // [ "Select campaign settings", Step1 ]
回答评论 .map（（[label，CustomStep]）=> ...
这只是 Array.map 方法的常见用法。通常，它允许使用映射函数将数组转换为另一个数组。数组的元素并返回另一个东西。
Answer for comment about .map(([ label, CustomStep ]) => ...
This is just a common use of the Array.map method. Generally, it allows to transform an array into another using a mapping function. A function that takes an element of the array and return another thing.
在这种情况下，要循环的数组的元素是提供的键值对Object.entries call。使用ES6数组和对象，可以解构，那就是那里发生的事情：
In this case, the element of the array to cycle is the key-value pair provided by the Object.entries call. With ES6 arrays, as well as objects, can be destructured, and that is what is happening there:
// you may see something like this around:
.map(element => {
// let's say that element is an array, you'll use it like:
// element[0] is the first element
// element[1] is the second one
})
// with ES6 that array can be destructed on-the-fly this way, which is totally equivalent
.map(([ label, CustomStep ]) => {
// label is the index 0 (element[0])
// CustomStep is the index 1 (element[1])
})
这篇关于物料ui的步进器中的map方法迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
