在 React js 中使用状态验证时无法修改文本字段

Question

我正在尝试构建一个 React 表单，我需要在其中将一些简单的数据提交到 post web 服务。我已经创建了表单，但是当我尝试编辑文本字段时，我无法做到。这样做的原因是我正在更新状态变量，因为用户在文本字段中键入。我不知道该怎么做，有人可以帮我解决这个问题。我的代码：

    import React, { Component } from 'react';
import { Dropdown, DropdownButton, Button, Col } from "react-bootstrap";
import Form from 'react-bootstrap/Form';

const divStyle = {
    marginTop: '30px'
};

export default class Venues extends Component {
    constructor() {
        super();
        this.state = {
          name: '',
          address: '',
          city: '',
          state: '',
          zip: '',
          nameError: "",
          addressError: "",
          cityError: "",
          stateError: "",
          zipError: "",
        };
      }

      onSubmit = (e) => {
        e.preventDefault();
        const isValid = this.validate();
        if (isValid) {
            console.log(this.state);
            // get our form data out of state
            const { name, address, city, state, zip } = this.state;
        }
        console.log("submit clicked");
        
        // axios.post('/', { fname, lname, email })
        //   .then((result) => {
        //     //access the results here....
        //   });
      }


      handleChange = event => {
        this.setState({
            [event.target.name]: event.target.value
        });
      };

      validate = () => {
        let nameError = "";
        let addressError = "";
        let cityError = "";
        let stateError = "";
        let zipError = "";
    
        if (!this.state.name) {
          nameError = "Name cannot be blank";
        }
        if (!this.state.address) {
            addressError = "Address can not be blank";
        }
        if (!this.state.city) {
            cityError = "City can not be blank";
        }
        if (!this.state.state) {
            stateError = "State can not be blank";
        }
        if (!this.state.zip) {
            zipError = "Zipcode can not be blank";
        }
        if (nameError || addressError || cityError || stateError || zipError) {
          this.setState({ addressError, nameError });
          return false;
        }
    
        return true;
      };

    render() {
        const { name, address, city, state, zip } = this.state;
        return (
            <div className="col-md-4 offset-md-4">
                <div style={divStyle}>
                <h3 >Create User</h3>
                </div>
                <Form onSubmit={this.onSubmit} >
                    <div className="form-group">
                    <Form.Label>Venue Name</Form.Label>
                    <Form.Control type="text" value={this.state.name} placeholder="Enter venue name" onChange={this.handleChange.bind(this)} />
                    <div style={{ fontSize: 12, color: "red" }}>
                        {this.state.nameError}
                    </div>
                    <Form.Label>Address</Form.Label>
                    <Form.Control type="text" placeholder="Enter street address" />
                    <div style={{ fontSize: 12, color: "red" }}>
                        {this.state.addressError}
                    </div>
                    <Form.Label>City</Form.Label>
                    <Form.Control type="text" value={this.state.city} placeholder="Enter city" />
                    <Form.Label>State</Form.Label>
                    <Form.Control type="text" value={this.state.state}  placeholder="Enter state" />
                    <Form.Label>Zip</Form.Label>
                    <Form.Control type="text" value={this.state.zip}  placeholder="Enter zipcode" />
                    <div style={divStyle}>
                        <Button type="submit" className="btn btn-primary mb-2">
                            Submit
                        </Button>
                    </div>
                    </div>
                </Form>
            </div>
        )
    }
}

Answer 1

1. 您没有将名称属性传递给输入字段
2. 某些输入没有 onChange 处理程序。

工作代码：

import React, { Component } from "react";
import { Dropdown, DropdownButton, Button, Col } from "react-bootstrap";
import Form from "react-bootstrap/Form";

const divStyle = {
  marginTop: "30px"
};

export default class Venues extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      address: "",
      city: "",
      state: "",
      zip: "",
      nameError: "",
      addressError: "",
      cityError: "",
      stateError: "",
      zipError: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  onSubmit = (e) => {
    e.preventDefault();
    const isValid = this.validate();
    if (isValid) {
      console.log(this.state);
      // get our form data out of state
      const { name, address, city, state, zip } = this.state;
    }
    console.log("submit clicked");

    // axios.post('/', { fname, lname, email })
    //   .then((result) => {
    //     //access the results here....
    //   });
  };

  handleChange = (event) => {
    this.setState((prevState) => ({
      ...prevState,
      [event.target.name]: event.target.value
    }));
  };

  validate = () => {
    let nameError = "";
    let addressError = "";
    let cityError = "";
    let stateError = "";
    let zipError = "";

    if (!this.state.name) {
      nameError = "Name cannot be blank";
    }
    if (!this.state.address) {
      addressError = "Address can not be blank";
    }
    if (!this.state.city) {
      cityError = "City can not be blank";
    }
    if (!this.state.state) {
      stateError = "State can not be blank";
    }
    if (!this.state.zip) {
      zipError = "Zipcode can not be blank";
    }
    if (nameError || addressError || cityError || stateError || zipError) {
      this.setState({ addressError, nameError });
      return false;
    }

    return true;
  };

  render() {
    const { name, address, city, state, zip } = this.state;

    return (
      <div className="col-md-4 offset-md-4">
        <div style={divStyle}>
          <h3>Create User</h3>
        </div>
        <Form onSubmit={this.onSubmit}>
          <div className="form-group">
            <Form.Label>Venue Name</Form.Label>
            <Form.Control
              type="text"
              name="name"
              value={this.state.name}
              placeholder="Enter venue name"
              onChange={this.handleChange}
            />
            <div style={{ fontSize: 12, color: "red" }}>
              {this.state.nameError}
            </div>
            <Form.Label>Address</Form.Label>
            <Form.Control
              type="text"
              name="address"
              value={this.state.address}
              placeholder="Enter street address"
              onChange={this.handleChange}
            />
            <div style={{ fontSize: 12, color: "red" }}>
              {this.state.addressError}
            </div>
            <Form.Label>City</Form.Label>
            <Form.Control
              type="text"
              name="city"
              value={this.state.city}
              placeholder="Enter city"
              onChange={this.handleChange}
            />
            <Form.Label>State</Form.Label>
            <Form.Control
              type="text"
              name="state"
              value={this.state.state}
              placeholder="Enter state"
              onChange={this.handleChange}
            />
            <Form.Label>Zip</Form.Label>
            <Form.Control
              type="text"
              name="zip"
              value={this.state.zip}
              placeholder="Enter zipcode"
              onChange={this.handleChange}
            />
            <div style={divStyle}>
              <Button type="submit" className="btn btn-primary mb-2">
                Submit
              </Button>
            </div>
          </div>
        </Form>
      </div>
    );
  }
}