javascript - 如何在反应中生成唯一 ID。js组件
问题描述
我在组件中有一个渲染函数,负责在页面上渲染控件。到目前为止,它工作正常。
render()
{
render
(
{this.state.Inputs.map(input => {
if (input.CODE === "VARIABLE") {
return (
<div className="row p-1">
<div className="col-sm-4">
<label>
<b>{input.LABEL_NAME}</b>
</label>
</div>
<div className="col-sm-6">
{this.renderControl(input.WIDGET_TYPE)}
<br />
</div>
</div>
);
}
})
)
}
下面是我的 renderControl() 函数。当我在页面上渲染它时,我想为每个控件生成唯一的 id。我不知道该怎么做。能否请你帮忙。提前致谢。
renderControl = controlName => {
switch (controlName) {
case "INTEGER":
case "TEXTBOX":
case "MEDIUM_TEXTBOX":
case "NUMBER":
return <input type="text" width="70%" className="txtSize" />;
case "DROPDOWN":
case "DIALOG":
return <Dropdown />;
case "DATE":
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>
);
case "DIALOG":
return <Dropdown />;
case "BOOLEAN":
return (
<div className="some-class">
<input type="radio" className="radio" name="x" value="y" id="y" />
<label htmlFor="y">Yes</label>
<input type="radio" className="radio" name="x" value="z" id="z" />
<label htmlFor="z">No</label>
</div>
);
default:
return;
}
};
解决方案
将您的代码更改为以下
render()
{
render
(
{this.state.Inputs.map((input,key) => {
if(input.ROW_CLASS_CODE === "MODEL_VARIABLE"){
return (
<div className="row p-1">
<div className="col-sm-4">
<label ><b>{input.LABEL_NAME }</b></label>
</div>
<div className="col-sm-6">
{this.renderControl(input.WIDGET_TYPE,key)}
<br></br>
</div>
</div>
)
}
})
)
}
renderControl = (controlName,key) =>{
switch(controlName) {
case 'INTEGER_FIELD':
case 'SMALL_TEXTBOX':
case 'PERCENTAGE':
case 'MEDIUM_TEXTBOX':
case 'REAL_NUMBER':
case 'MONEY':
return <input type="text" key={key} width="70%" className="txtSize" ></input>;
case 'NARROW_DROPDOWN':
case 'SELECTION_DIALOG':
return (<Dropdown key={key}></Dropdown>);
case 'DATE_FIELD':
return (<DatePicker key={key}
selected={this.state.startDate}
onChange={this.handleChange}
/>)
case 'SELECTION_DIALOG':
return <Dropdown key={key}></Dropdown>;
case 'BOOLEAN_FIELD':
return (<div className="some-class" key={key}>
<input type="radio" className="radio" name="x" value="y" id="y" />
<label htmlFor="y">Yes</label>
<input type="radio" className="radio" name="x" value="z" id="z" />
<label htmlFor="z">No</label>
</div>);
default:
return ;
}
}`
推荐阅读
- c++ - C++ 编译和链接问题
- json - 没有使用 RestTemplate 获得外部 Json API 响应
- reactjs - NextJS 动态导入问题
- python - 用户关闭应用程序时调用函数( pyQt5 )
- autodesk-forge - Autodesk Forge/BIM 360 更新版本
- python - Buildozer 很长的导入语句导致加载模块失败
- electron - 我可以在 Electron 应用程序中使用最新的 HTML/CSS/JS 吗?
- python - 有没有办法让 python 自动查看我在终端中打印出来的一些文本以查找该文本中的关键字?
- java - 使用 Java 和 Snowflake,如何在准备好的语句中使用 queryId 进行查询?
- node.js - Mongoose + MongoDB 可以查询所有父集合吗?