繁体   English   中英

在React子组件中提交但空屏后尝试获取表单数据

[英]Try to get form data after submit in a React child component but empty screen

我有一个子组件是一个组件形式的问题。 我想将表单数据传递给我的父组件,然后进行Ajax调用。

这是我的父组件

import React, { Component } from 'react';
import { render } from 'react-dom';
import CustomerForm from './customerForm';
import styles from './scss/application.scss';

class App extends React.Component {
    constructor() {
            super();
            this._handleSubmit = this._handleSubmit.bind(this);
    }

    _handleSubmit(customer) {

        alert(customer);
        //AJAX
    }
    render() {
        return (

         <CustomerForm
            handleSubmit={this._handleSubmit}
            />
          </section>
        );
      }
}

render(
  <App />,
  document.getElementById('root')
);

然后这是CustomerForm我包括的子组件形式:

import React, { Component } from 'react';

class CustomerForm extends Component {

    constructor(props) {
        super(props);

    }

    _onSubmit(e) {

        e.preventDefault();

        var name = this._name.value.trim();

        if (!name) {
          return;
        }

        this.props.handleSubmit({name: name, identifier: identifier, cost: cost});
    }

    render() {
    return (
             <form onSubmit={this._handleSubmit}>
                    Name <br/> <input id="name" type="text" name="name" 
        value={this.state.name}
        ref={(input) => this._name = input}/><br/>

                    <input type="submit" value="Create"/>
                 </form>

   );
  }
}
export default CustomerForm

实际上,我的屏幕是空的,我在Web浏览器的Web检查器中看不到任何错误消息,问题出在子组件上。 当我删除父组件时,一切正常。

任何想法? 劳伦斯(Thx Laurent)

您在提交表单时出错,将<form onSubmit={this._handleSubmit}>更改为<form onSubmit={this._onSubmit}>

return (
     <form onSubmit={this._onSubmit}>
       Name <br/> 
       <input id="name" type="text" name="name" 
         value={this.state.name}
         ref={(input) => this._name = input}/><br/>
       <input type="submit" value="Create"/>
      </form>
);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM