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

Question

我收到此错误 TypeError: Cannot read property 'state' of undefined 每当我在表单中键入并单击提交时，错误发生在 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

     )
 }
}

标签： javascriptreactjs

Answer 1

您还没有为您onSubmit的构造函数内部完成绑定。所以thisinsideonSubmit方法不引用类实例。因此错误。

只需绑定 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