首页 > 解决方案 > 我的提交处理程序在反应中无法正常工作

问题描述

我已经制作了一个带有提交按钮的表单,但是当我尝试提交时显示无法发布

我已经阻止了默认行为

API 已启动并正在运行,因为我获取了其他表单的数据并且我已授予插入权限

由于我上面提到的原因,端口也是正确的

我不确定要寻找什么,因为简单的架构任何建议都可能会有所帮助

class Personal_info extends Component {
constructor(props){
    super(props);

    this.state = {
        onoma: "",
        epitheto: ""
    };
}

importErg(){
    fetch("http://localhost:3000/ergazomenoi", {
        method: "POST",
        body: JSON.stringify({
        "onoma": this.state.onoma,
        "epitheto": this.state.epitheto
        }),
        headers: {
            "Authorization": "Bearer ",
            "Content-Type": "application/json; charset=utf-8"
},
  credentials: "same-origin"
 })
 }

SubmitHandler = (event) => {
    event.preventDefault();
        this.importErg();
        onStart()
        alert("Ok")
}
    onomaChangeHandler = (event) => {
        this.setState({onoma: event.target.value});
    }
    epithetoChangeHandler = (event) => {
        this.setState({epitheto: event.target.value});
    }
    
render() {

return (

    <div>
    <img id="top" src="top.png" alt=""></img>
    <form method="POST" action="" onSubmit={this.SubmitHandler}>
    <div id="form_container">
        <form id="form" class="appnitro"  method="post" action="">
        <div class="form_description">
                </div>
        <ul>
            <li id = "li_3">
            <label class="description" for="element_3" >Όνομα </label>
            <span>
                    <input type ="text" id="nameInput" name= "nameInput" class="element text" maxLength="255" size="15"  onChange={this.onomaChangeHandler} value = {this.state.onoma} required/>
                    <label>Όνομα</label>
                </span>
            <span>
            <input type ="text" id="surNameInput" name= "surNameInput" class="element text" maxLength="255" size="14" onChange={this.epithetoChangeHandler} value = {this.state.epitheto} required/>
            <label>Επώνυμο</label>
            </span>
            </li>
                <li class="buttons">
                
                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>
        </li>
            </ul>
        </form> 
        <div id="footer">
        </div>
    </div>
    </form>
    <img id="bottom" src="bottom.png" alt=""></img>
</div>
);
}
 }

export default Personal_info;

标签: reactjsfetch

解决方案


推荐阅读