Question

我根据另一个选择框更改动态获取选择选项。显示数据的选择框的状态具有状态reg，但是当我提交表单时，为什么状态reg显示为未定义。

组件是：

class CreateComplain extends Component {
constructor(props) {
    super(props);
    this.state = {reg : 'Select Student', class : 'Select Class', complain : '', regno : [], searching : false, searchBtnDisable : false, formErrors : [], formSuccess: ''};
    this.handleInputChange = this.handleInputChange.bind(this);
    this.eleChange = this.eleChange.bind(this);
    axios.defaults.baseURL = base_url;
}

eleChange(e) {
    this.setState({[e.target.name]: e.target.value});
    console.log(e.target.name);
    console.log(this.state.reg);

}

handleInputChange(e) {
    this.setState({[e.target.name]: e.target.value});
    var classs = e.target.value;
    axios.get('/getClassStudents', {
               params :  { class: classs}
            },
            {
                headers: { Authorization: "Bearer " + localStorage.getItem("jwtToken") }
            }).then(res => {
                const regno = res.data.regno;
                this.setState({regno : regno});
                console.log(this.state.regno);
            }).catch(function (error) {
                if(error.response.status === 401 && error.response.data.message === "Token has expired"){
                    this.setState({ searching: false, searchBtnDisable : false, formErrors: error.response.data.message });
                    AuthService.checkToken()

                }
                if(error.response.status === 422 && error.response.data.result === "error"){
                    this.setState({ searching: false, searchBtnDisable : false, formErrors: error.response.data.message });
                }
            });
}

submit(event) {
    event.preventDefault();
    console.log(this.state.reg);
    var regnum = this.state.reg;
    var complain = this.state.complain;

    this.setState({ searching: true, searchBtnDisable: true }, function() {
        axios.post('/complain', {
                regno: regnum,
                reply_id : 0,
                message : complain
            },
            {
                headers: { Authorization: "Bearer " + localStorage.getItem("jwtToken") }
            }).then(res => {
                if(res.status === 200 && res.data.result === 'success'){
                    this.setState({ searching: false, searchBtnDisable : false, formSuccess: res.data.message,formErrors: [] });
                }


            }).catch(error => {

                if(error.response.status === 401 && error.response.data.message === "Token has expired"){
                    AuthService.checkToken();
                    this.setState({ searching: false, searchBtnDisable : false, formErrors: error.response.data.message });

                }
                if(error.response.status === 422 && error.response.data.result === "error"){
                    this.setState({ searching: false, searchBtnDisable : false, formErrors: error.response.data.message });
                }

            });
    });
}

render() {
    return (

                <div className="container">
                    <FormErrors formErrors={this.state.formErrors} />
                    <FormSuccess formErrors={this.state.formSuccess} />

                    <form onSubmit={this.submit}>
                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Select Class</label>
                            <div className="col-sm-10">
                            <select className="form-control" name="class" value={this.state.class} onChange={this.handleInputChange}>
                                <option>Select Class</option>
                                <option>Six</option>
                            </select>
                            </div>
                        </div>
                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Select Student</label>
                            <div className="col-sm-10">
                                <select className="form-control" name="reg" onChange={this.eleChange}>
                                    <option>Select Student</option>
                                    {
                                        this.state.regno.map((post, i)=>(

                                                <option key={i} value={post.REGNO}>{ post.STName } ( { post.REGNO } ) </option>
                                      ))
                                    }
                                        </select>
                            </div>
                        </div>
                        <div className="form-group row">
                            <label className="col-sm-2 col-form-label">Complain Box</label>
                            <div className="col-sm-10">
                                <textarea className="form-control" name="complain" value={this.state.complain} onChange={this.eleChange}>
                                </textarea>
                            </div>
                        </div>

                        <div className="form-group row">
                            <div className="col-sm-10">
                                <div className="col-sm-10">
                                <button type="submit" className="btn btn-primary fuse-ripple-ready" disabled={this.state.searchBtnDisable ? true : false} >
                                {this.state.searching ? 'Submitting...' : 'Submit'}
                            </button>
                            </div>
                            </div>
                        </div>
                    </form>

    )
}
 }
 export default CreateComplain;

Answer 1

您需要为提交方法添加绑定。如果您使用 React.createClass ，则将所有函数React autobinds 添加到此处。因此 this 关键字会自动绑定到组件的实例。其余的这些方法（如代码）通过 ES6 类声明React组件。因此，如果您使用ES6类，则React不再自动绑定。解决此问题的一种方法是

constructor(props) {
   ...
   this.submit = this.submit.bind(this);
   ...
}

TypeError：无法读取属性＆＃39; state＆＃39;未定义的动态提取数据

1 个答案: