如何在表单中正确显示值？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在表单中正确显示值？相关的知识，希望对你有一定的参考价值。
我正在尝试从我所处的状态中生成一个from：
const { id } = this.props.match.params;
const formGen = this.state.arr.map(arr => {
if (id == arr.id) {
const inner = this.state.arr.input.map(inputs => (
<div>
<h1>{arr.name}</h1>
<label>{inputs.inputLabel}</label>
<input value={inputs.inputValue} type={inputs.inputType} />
</div>
));
}
});
现在，我不知道如何让它显示在渲染选项卡中，因为我在变量中有一个变量：
<form />
{formGen.inner}
</div>
这是我想要映射的状态
arr: [
{
id: 1,
name: 'firstForm',
input: [
{
inputLabel: 'wowLabel',
inputType: 'wowType',
inputValue: 'wowValue'
},
{
inputLabel: 'wowLabel2',
inputType: 'wowType2',
inputValue: 'wowValue2'
}
]
}
答案
您可以返回它，而不是将响应存储在变量中，否则返回undefined，然后过滤掉响应。
const { id } = this.props.match.params;
const formGen = this.state.arr.map(arr => {
if (id == arr.id) {
return this.state.arr.input.map(inputs => (
<div>
<h1>{arr.name}</h1>
<label>{inputs.inputLabel}</label>
<input value={inputs.inputValue} type={inputs.inputType} />
</div>
));
}
return;
}).filter(Boolean);
在此之后，你可以渲染它
<form />
{formGen}
</div>
另一答案
const { id } = this.props.match.params;
// replace the first map with a find
const arr = this.state.arr.find(a => a.id == id);
// if arr is defined
if(arr){
const inner = arr.input.map(inputs => (
<div>
<h1>{arr.name}</h1>
<label>{inputs.inputLabel}</label>
<input value={inputs.inputValue} type={inputs.inputType} />
</div>
));
} else {
// indicate to the user the that id was not found and what to do to fix the problem
}以上是关于如何在表单中正确显示值？的主要内容，如果未能解决你的问题，请参考以下文章