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

Question

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

    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

您没有将名称属性传递给输入字段
有些输入没有 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>
    );
  }
}

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

Unable to modify textfield when using validation from states in Reat js

javascript

forms

validation

reactjs

react-bootstrap