在React子組件中提交但空屏后嘗試獲取表單數據

Question

我有一個子組件是一個組件形式的問題。 我想將表單數據傳遞給我的父組件，然后進行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）

Answer 1

您在提交表單時出錯，將<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>
);