Javascript 在RET js中使用状态验证时无法修改textfield_Javascript_Reactjs_Forms_Validation_React Bootstrap

Javascript 在RET js中使用状态验证时无法修改textfield

javascript reactjs forms validation

Javascript 在RET js中使用状态验证时无法修改textfield,javascript,reactjs,forms,validation,react-bootstrap,Javascript,Reactjs,Forms,Validation,React Bootstrap,我正在尝试构建一个React表单，其中我需要向postweb服务提交一些简单的数据。我已经创建了表单，但当我试图编辑文本字段时，我无法这样做。原因是我正在将状态变量更新为文本字段中的用户类型。我不知道怎么做，有人能帮我吗。我的代码： import React, { Component } from 'react'; import { Dropdown, DropdownButton, Button, Col } from "react-bootstrap"; impo

我正在尝试构建一个React表单，其中我需要向postweb服务提交一些简单的数据。我已经创建了表单，但当我试图编辑文本字段时，我无法这样做。原因是我正在将状态变量更新为文本字段中的用户类型。我不知道怎么做，有人能帮我吗。我的代码：

    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>
        )
    }
}

import React，{Component}来自'React'；
从“react bootstrap”导入{Dropdown，DropdownButton，Button，Col}；
从“react引导/表单”导入表单；
常量divStyle={
玛金托普：“30px”
};
导出默认类组件{
构造函数（）{
超级（）；
此.state={
名称：“”，
地址：''，
城市：''，
声明：''，
zip:“”，
名称错误：“”，
地址错误：“”，
cityError:“，
状态错误：“”，
齐佩罗：“，
};
}
onSubmit=（e）=>{
e、 预防默认值（）；
const isValid=this.validate（）；
如果（有效）{
console.log（this.state）；
//将表单数据移出状态
const{name，address，city，state，zip}=this.state；
}
console.log（“单击提交”）；
//post（'/'，{fname，lname，email}）
//。然后（（结果）=>{
////在此处访问结果。。。。
//   });
}
handleChange=事件=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
验证=（）=>{
让nameError=“”；
设addressError=“”；
让cityError=“”；
让stateError=“”；
让ziperor=“”；
如果（！this.state.name）{
nameError=“名称不能为空”；
}
如果（！this.state.address）{
addressError=“地址不能为空”；
}
如果（！this.state.city）{
cityError=“城市不能为空”；
}
如果（！this.state.state）{
stateError=“状态不能为空”；
}
如果（！this.state.zip）{
ziperor=“Zipcode不能为空”；
}
如果（名称错误| | |地址错误| | | |城市错误| |状态错误| | zipError）{
this.setState（{addressError，nameError}）；
返回false；
}
返回true；
};
render（）{
const{name，address，city，state，zip}=this.state；
返回(
创建用户
场馆名称
{this.state.nameError}
地址
{this.state.addressError}
城市
陈述
拉链
提交
)
}
}

您没有将name属性传递给输入字段

有些输入没有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>
    );
  }
}

import React，{Component}来自“React”；
从“react bootstrap”导入{Dropdown，DropdownButton，Button，Col}；
从“react引导/表单”导入表单；
常量divStyle={
玛金托普：“30px”
};
导出默认类组件{
构造函数（）{
超级（）；
此.state={
姓名：“，
地址：“，
城市：“，
州：“，
邮政编码：“，
名称错误：“”，
地址错误：“”，
cityError:“，
状态错误：“”，
齐佩罗尔：“
};
this.handleChange=this.handleChange.bind（this）；
}
onSubmit=（e）=>{
e、 预防默认值（）；
const isValid=this.validate（）；
如果（有效）{
console.log（this.state）；
//将表单数据移出状态
const{name，address，city，state，zip}=this.state；
}
console.log（“单击提交”）；
//post（'/'，{fname，lname，email}）
//。然后（（结果）=>{
////在此处访问结果。。。。
//   });
};
handleChange=（事件）=>{
this.setState（（prevState）=>({
…国家，
[event.target.name]：event.target.value
}));
};
验证=（）=>{
让nameError=“”；
设addressError=“”；
让cityError=“”；
让stateError=“”；
让ziperor=“”；
如果（！this.state.name）{
nameError=“名称不能为空”；
}
如果（！this.state.address）{
addressError=“地址不能为空”；
}
如果（！this.state.city）{
cityError=“城市不能为空”；
}
如果（！this.state.state）{
stateError=“状态不能为空”；
}
如果（！this.state.zip）{
ziperor=“Zipcode不能为空”；
}
如果（名称错误| | |地址错误| | | |城市错误| |状态错误| | zipError）{
this.setState（{addressError，nameError}）；
返回false；
}
返回true；
};
render（）{
const{name，address，city，state，zip}=this.state；
返回(
创建用户
场馆名称
{this.state.nameError}
地址
{this.state.addressError}
城市
陈述
拉链
提交
);
}
}

Hi-Punit，我收到TypeError:无法读取Null的属性'name'，我在尝试编辑handleChange函数中的字段时收到此消息