如何让 reactJS 渲染状态变量

Question

我刚刚开始研究 React 表单。我运行遇到了一个问题，即 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(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'，如果没有输入名称，则重新渲染表单姓名输入框的标签为'You need to enter your name'.

非常感谢任何帮助。

Answer 1

为了引用状态变量，您需要使用 this.state.name，我在您的渲染函数中只看到 this.name

如何让 reactJS 渲染状态变量

How to get reactJS to render a state variable

reactjs

mdbreact