Javascript reactJS和带有贴图功能的动态渲染我的数据正在重复
我从一个应用程序开始，它需要根据下拉列表中的选择动态生成输入框。这是我的代码：Javascript reactJS和带有贴图功能的动态渲染我的数据正在重复,javascript,reactjs,Javascript,Reactjs,我从一个应用程序开始，它需要根据下拉列表中的选择动态生成输入框。这是我的代码： import React, { Component } from "react"; import "./App.css"; import { Container, Row, Col, Input, Button, Fa, Card, CardBody } from "mdbreact"; class App extends Component { constructor(props) { super(p
import React, { Component } from "react";
import "./App.css";
import { Container, Row, Col, Input, Button, Fa, Card, CardBody } from "mdbreact";
class App extends Component {
constructor(props) {
super(props);
this.state = {
numberOfUnits: 0,
name: {
valid: true,
value: "",
label: "Property Nickname",
length: 0,
css: "grey-text"
},
address: {
valid: true,
value: "",
label: "Property Address",
length: 0,
css: "grey-text"
},
city: {
valid: true,
value: "",
label: "Property City",
length: 0,
css: "grey-text"
},
numberOfUnits: {
valid: true,
value: "",
label: "Property City",
length: 0,
css: "grey-text"
}
};
this.saveData = this.saveData.bind(this);
this.setUnitNumber = this.setUnitNumber.bind(this);
}
setUnitNumber() {
let currentComponent = this;
var localUnitCount = document.getElementById("inputNumberOfUnits").value;
currentComponent.setState({ numberOfUnits: localUnitCount });
}
saveData() {
let currentComponent = this;
var validData = true;
var localName = {
valid: true,
value: "",
label: "Property Nickname",
length: 0,
css: "grey-text"
};
var localAddress = {
valid: true,
value: "",
label: "Property Nickname",
length: 0,
css: "grey-text"
};
var localCity = {
valid: true,
value: "",
label: "Property City",
length: 0,
css: "grey-text"
};
// validate the property nickname
localName.value = document.getElementById("lblName").value;
localName.length = localName.value.length;
if (localName.length < 5) {
validData = false;
localName.valid = false;
localName.label =
"You did not enter a property nickname (minimum of 5 charaters)";
localName.css = "text-danger";
}
// validate the property address
localAddress.value = document.getElementById("lblAddress").value;
localAddress.length = localAddress.value.length;
if (localAddress.length < 3) {
validData = false;
localAddress.valid = false;
localAddress.label =
"You did not enter a property Address (minimum of 5 characters)";
localAddress.css = "text-danger";
}
// validate the property city
localCity.value = document.getElementById("lblCity").value;
localCity.length = localCity.value.length;
if (localCity.length < 3) {
validData = false;
localCity.valid = false;
localCity.label =
"You did not enter a property city (minimum of 3 characters)";
localCity.css = "text-danger";
}
currentComponent.setState({
name: localName,
city: localCity,
address: localAddress
});
}
renderData = () => {
let currentComponent = this;
var localUnitCount = this.state.numberOfUnits;
var idArray = [];
var idObject = {
counter: 0,
idName: ""
};
for (var counter = 0; counter < localUnitCount; counter++) {
var unitName = "Unit";
if (counter < 10) {
unitName = unitName + "0";
}
unitName = unitName + (counter + 1);
idObject.counter = counter + 1;
idObject.idName = unitName;
idArray[counter] = idObject;
console.log("idArray[counter]: ", idArray[counter]);
}
console.log(idArray);
return idArray.map(item => (
<div>
<div className="oldscanFont">
<label> Unit {item.counter} </label>
</div>
<hr />
</div>
));
};
render() {
return (
<div className="App">
<div className="d-flex flex-wrap justify-content-center position-absolute w-100 h-50 align-items-center align-content-center">
<Container>
<Row>
<Col md="6">
<Card>
<CardBody>
<form>
<p className="h4 text-center py-4">Sign up</p>
<div className={this.state.name.css}>
<Input
id="lblName"
label={this.state.name.label}
group
type="text"
/>
</div>
<div className={this.state.address.css}>
<Input
id="lblAddress"
label={this.state.address.label}
group
type="text"
/>
</div>
<div className={this.state.city.css}>
<Input
id="lblCity"
label={this.state.city.label}
group
type="text"
/>
</div>
<div className={this.state.numberOfUnits.css}>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label
class="input-group-text"
for="inputNumberOfUnits"
>
Number of Units
</label>
</div>
<select
class="custom-select"
id="inputNumberOfUnits"
onChange={() => {
this.setUnitNumber();
}}
>
<option value="1" selected>
One
</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
<option value="11">Eleven</option>
<option value="12">Twelve</option>
<option value="13">Thirteen</option>
<option value="14">Fourteen</option>
<option value="15">Fifteen</option>
<option value="16">Sixteen</option>
<option value="17">Seventeen</option>
<option value="18">Eighteen</option>
<option value="19">Nineteen</option>
<option value="20">Twenty</option>
</select>
</div>
</div>
<div>{this.renderData()}</div>
<div className="text-center py-4 mt-3">
<Button
color="cyan"
onClick={() => {
this.saveData();
}}
>
Save
</Button>
</div>
</form>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</div>
);
}
}
export default App;
import React，{Component}来自“React”；
导入“/App.css”；
从“mdbreact”导入{容器、行、列、输入、按钮、Fa、卡、卡片体}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数量单位：0，
姓名：{
有效：对，
值：“”，
标签：“属性昵称”，
长度：0，
css：“灰色文本”
},
地址:{
有效：对，
值：“”，
标签：“属性地址”，
长度：0，
css：“灰色文本”
},
城市：{
有效：对，
值：“”，
标签：“地产城”，
长度：0，
css：“灰色文本”
},
数量单位：{
有效：对，
值：“”，
标签：“地产城”，
长度：0，
css：“灰色文本”
}
};
this.saveData=this.saveData.bind（this）；
this.setUnitNumber=this.setUnitNumber.bind（this）；
}
setUnitNumber（）{
让currentComponent=this；
var localUnitCount=document.getElementById（“inputNumberOfUnits”）.value；
currentComponent.setState（{numberOfUnits:localUnitCount}）；
}
saveData（）{
让currentComponent=this；
var validData=真；
var localName={
有效：对，
值：“”，
标签：“属性昵称”，
长度：0，
css：“灰色文本”
};
var localAddress={
有效：对，
值：“”，
标签：“属性昵称”，
长度：0，
css：“灰色文本”
};
var localCity={
有效：对，
值：“”，
标签：“地产城”，
长度：0，
css：“灰色文本”
};
//验证属性昵称
localName.value=document.getElementById（“lblName”）.value；
localName.length=localName.value.length；
if（localName.length<5）{
validData=false；
localName.valid=false；
localName.label=
“您没有输入属性昵称（至少5个字符）”；
localName.css=“文本危险”；
}
//验证属性地址
localAddress.value=document.getElementById（“lblAddress”）.value；
localAddress.length=localAddress.value.length；
if（localAddress.length<3）{
validData=false；
localAddress.valid=false；
localAddress.label=
“您没有输入属性地址（至少5个字符）”；
localAddress.css=“文本危险”；
}
//验证属性城市
localCity.value=document.getElementById（“lblCity”）.value；
localCity.length=localCity.value.length；
如果（localCity.length<3）{
validData=false；
localCity.valid=false；
localCity.label=
“您没有输入物业城市（至少3个字符）”；
localCity.css=“文本危险”；
}
currentComponent.setState({
名称：localName，
城市：本地城市，
地址：本地地址
});
}
renderData=（）=>{
让currentComponent=this；
var localUnitCount=this.state.numberOfUnits；
var-idArray=[]；
变量idObject={
柜台:0,，
idName:“
};
对于（变量计数器=0；计数器(
单位{项目计数器}
));
};
render（）{
返回(
注册
单位数量
{
这个.setUnitNumber（）；
}}
>
一个
两个
三
四
五
六
七
八
九
十
十一
十二
十三
十四
十五
十六
十七
十八
十九
二十
{this.renderData（）}
{
这是saveData（）；
}}
>
拯救
);
}
}
导出默认应用程序；
...
for (var counter = 0; counter < localUnitCount; counter++) {
var unitName = "Unit";
if (counter < 10) {
unitName = unitName + "0";
}
unitName = unitName + (counter + 1);
idObject.counter = counter + 1;
idObject.idName = unitName;
idArray[counter] = idObject;
console.log("idArray[counter]: ", idArray[counter]);
}
...
var idNamePrefix = "Unit";
for (var counter = 0, unitName; counter < localUnitCount; counter++) {
if (counter < 10) {
unitName = idNamePrefix + "0";
} else {
unitName = idNamePrefix + (counter + 1);
}
idArray.push(
// make object with idObject key-values applied.
// more importantly, the last object replaces the count and idName value.
Object.assign({}, idObject, {counter: counter + 1, idName: unitName})
)
}