Question

我收到此错误TypeError：每当我在表单中键入并单击提交时，都无法读取未定义的属性“状态”，而在const createAppointment中发生错误，我想在控制台中显示然后发生错误在互联网上找不到其他人的类似问题。

代码如下：

export default class createAppointment extends Component  {
constructor(props){
    super(props); 

     this.onChangeUser = this.onChangeUser.bind(this);
     this.onChangeName = this.onChangeName.bind(this);
     this.onChangeSpecialty = this.onChangeSpecialty.bind(this);
     this.onChangePhoneNumber = this.onChangePhoneNumber.bind(this);
     this.onChangeReason = this.onChangeReason.bind(this);
     this.onChangeEmail = this.onChangeEmail.bind(this);
     this.onChangeDate = this.onChangeDate.bind(this);


    this.state={
        userName:'',
        name:'',
        specialty: '',
        phoneNumber: Number, 
        reason: '' ,
        email:'',
        date: new Date(),
        users: []

    }

}


componentDidMount(){

    this.setState({
        users:['test user'],
        userName:'test user'

    })

}



onChangeUser(a){
this.setState({
    userName: a.target.value
});
}
onChangeName(a){
this.setState({
    name: a.target.value
});
}
onChangeSpecialty(a){
    this.setState({
        specialty: a.target.value
 });
 }
onChangePhoneNumber(a){
this.setState({
    phoneNumber: a.target.value
});
}
onChangeReason(a){
this.setState({
    reason: a.target.value
});
}
onChangeEmail(a){
this.setState({
    email: a.target.value
});
}
onChangeDate(date){
this.setState({
    date: date
});
 }

 onSubmit(a){
    //  will prevent usual submit and will submit what we want 
     a.preventDefault();
**//here are the errors**
     const appoinrment = {

        userName: this.state.userName,
        name: this.state.name,
        specialty: this.state.specialty,
        phoneNumber: this.state.phoneNumber,
        reason: this.state.reason,
        email: this.state.email,
        date: this.state.date

     }
     console.log(appoinrment)

     window.location = '/';


 }



 render(){
     return(

        // start form

        <div>
      <h3>Book an appoinrment</h3>


      <form onSubmit={this.onSubmit}>
        <div className="form-group"> 

          <label>Username: </label>
          <select ref="userInput"
              required
              className="form-control"
              value={this.state.userName}
              onChange={this.onChangeUser}>
              {
                this.state.users.map(function(user) {
                  return <option 
                    key={user}
                    value={user}>{user}
                    </option>;
                })
              }
          </select>

        </div>
        <div className="form-group"> 
          <label>Name: </label>
          <input  type="text"
              required
              className="form-control"
              value={this.state.name}
              onChange={this.onChangeName}
              />
        </div>

        <div className="form-group"> 
          <label>Specialty: </label>

          <select required
              className="form-control"
              value={this.state.specialty}
              onChange={this.onChangeSpecialty}>
    <option value="Orthopedics">Orthopedics</option>
    <option value="Vascular">Vascular</option>
    <option value="Cardiothoracic">Cardiothoracic</option>
    <option value="Reconstructive">Reconstructive</option>
    <option value="Oncology">Oncology</option>
    <option value="Neurosurgery">Neurosurgery</option>
    <option value="UrologySurgery">Urology surgery</option>
    <option value="GeneralSurgery">General surgery</option>
    <option value="PediatricSurgery">Pediatric surgery</option>
          </select>



        </div>

        <div className="form-group"> 
          <label>Phone Number: </label>
          <input  type="number"
              required
              className="form-control"
              value={this.state.phoneNumber}
              onChange={this.onChangePhoneNumber}
              />
        </div>


        <div className="form-group">
          <label>Date </label>
          <div>
            <DatePicker
              selected={this.state.date}
              onChange={this.onChangeDate}
            />
          </div>
        </div>


        <div className="form-group">
          <label>Email </label>
          <input 
              type="text" 
              className="form-control"
              value={this.state.email}
              onChange={this.onChangeEmail}
              />
        </div>

        <div className="form-group">
          <label>Reason for visiting </label>
          <textarea rows="4" cols="50" className="form-control"   value={this.state.reason}  onChange={this.onChangeReason}>

</textarea>


        </div>
        <br/>

        <div className="form-group">
          <input type="submit" value="Book appointment now!" className="btn btn-primary" />

          <input type="reset" value="Reset" className="btn btn-primary reset"/>
        </div>
      </form>
    </div>

        // end form

     )
 }
}

Answer 1

您尚未在构造函数中完成对onSubmit的绑定。因此，this方法内的onSubmit并不引用类实例。因此错误。

只需在提交时绑定

constructor(props){
    super(props); 

     this.onChangeUser = this.onChangeUser.bind(this);
     this.onChangeName = this.onChangeName.bind(this);
     this.onChangeSpecialty = this.onChangeSpecialty.bind(this);
     this.onChangePhoneNumber = this.onChangePhoneNumber.bind(this);
     this.onChangeReason = this.onChangeReason.bind(this);
     this.onChangeEmail = this.onChangeEmail.bind(this);
     this.onChangeDate = this.onChangeDate.bind(this);
     this.onSubmit = this.onSubmit.bind(this); //<------ here

React js TypeError：无法读取未定义的属性“状态”

1 个答案: