如何让reactJS呈现状态变量
我刚开始检查反应形式。我遇到了一个问题,react会在渲染中标记我尝试填充输入框标签的行。以下是我的应用程序的代码:如何让reactJS呈现状态变量,reactjs,mdbreact,Reactjs,Mdbreact,我刚开始检查反应形式。我遇到了一个问题,react会在渲染中标记我尝试填充输入框标签的行。以下是我的应用程序的代码: import React, { Component } from 'react'; import './App.css'; import { Container, Row, Col, Input, Button, Fa, Card, CardBody } from 'mdbreact'; class App extends Component { constructor
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 = {
name: {
valid: true,
value: '',
label: 'Your Name',
length: 0
}
}
this.saveData = this.saveData.bind(this);
}
saveData() {
let currentComponent = this;
var validData = true;
var locaName = {
valid: true,
value: '',
label: 'Your Name',
length: 0
}
locaName.value = document.getElementById("lblName").value;
locaName.length = locaName.value.length;
if (locaName.length < 1) {
validData = false;
locaName.valid = false;
locaName.label = "You need to enter your name";
}
if (validData == false) {
currentComponent.setState({ name:locaName });
}
}
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="grey-text">
<Input id="lblName" label={this.name.label} icon="user" group type="text" />
<Input id="lblEmail" label="Your email" icon="envelope" group type="email" />
<Input id="lblConfirmEmail" label="Confirm your email" icon="exclamation-triangle" group type="text" />
</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;
此时,我所要做的就是使用名称输入框的标签“Your name”来呈现表单,如果没有输入名称,则使用名称输入框的标签“Your need to enter Your name”来重新呈现表单
非常感谢您的帮助。为了引用状态变量,您需要使用此.state.name,我只在渲染函数中看到了此.name谢谢您,保罗!也许我应该停止编码一段时间。错过这么简单的事情。有一双新鲜的眼睛看看总是好的。再次感谢你。