React組件提交表單功能沒有獲取值

Question

我有一個表單組件，我提交，然後想提交後將數據傳遞給一個函數，但我得到一個空白的警報消息。

下面是代碼：

import React, { Component } from 'react'; 

class SubmitForm extends Component { 
    constructor() { 
    super(); 
    this.state = {title: ''}; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleSubmit(event) { 
    this.getdata(this.state.title, this.state.firstname, this.state.lastname); 
    event.preventDefault(); 
    } 

    getdata(title) { 
    alert(title); 
    alert(firstname); 
    alert(lastname); 
    } 

    render() { 
    return (
     <div> 
      <form onSubmit={this.handleSubmit.bind(this)}> 

       <label htmlFor="title">Title</label> 
       <input type="text" id="title" /> 

       <label htmlFor="firstname">Firstname</label> 
       <input type="text" id="firstname" /> 

       <label htmlFor="lastname">Lastname</label> 
       <textarea id="lastname" rows="3"></textarea> 

      <input type="submit" value="Submit" /> 
      </form> 
     </div> 
    ); 
    } 
} 

export default SubmitForm; 

我怎樣才能解決這個問題，所以我得到的數據？

Answer 1

您的表單輸入元素沒有設置爲狀態的值屬性。在React中，你應該在表單上使用'受控組件'。

請參閱相關的陣營文檔：https://facebook.github.io/react/docs/forms.html

Answer 2

您的每個組件都需要爲onChange事件提供處理程序。

function handleTitleChange(event) { 
    this.setState(function() { 
    return { title: event.target.value }; 
    }); 
} 

<input type="text" id="title" value={this.state.title} onChange={this.handleTitleChange.bind(this)} /> 

這裏的陣營文檔的鏈接：https://facebook.github.io/react/docs/forms.html#controlled-components

也有失控的成分，但這不是「推薦」的方式。

Answer 3

這些問題與您的代碼：

1. 要綁定handleSubmit兩次。

   • 在構造this.handleSubmit = this.handleSubmit.bind(this);

   • 和形式道具的onsubmit <form onSubmit={this.handleSubmit.bind(this)}>

2. 你是不是你的表格上處理的輸入值。你應該做些什麼來訪問每個輸入端輸入的值，收聽一個onChange事件（Controlled Component）或訪問它作爲一個Uncontrolled component

3. 你getdata()方法是錯誤的，要設置一個參數，並通過三個參數。

你的定義是：

getdata(title) { 
    alert(title); 
    alert(firstname); 
    alert(lastname); 
    } 

您在調用它像：

this.getdata(this.state.title, this.state.firstname, this.state.lastname); 

這不是功能是如何工作的。爲了使它與上面你需要定義它喜歡的工作：

getdata(title, firstName, lastName) { 
    alert(title); 
    alert(firstName); 
    alert(lastName); 
} 

所以一旦你解決所有這些錯誤，你應該看一看的React documentation更多地瞭解如何反應的作品。

同時這裏是從文檔做出反應失控的組件將幫助您瞭解如何讓你的榜樣工作一個可行的例子：

class NameForm extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.handleSubmit = this.handleSubmit.bind(this); 
 
    } 
 

 
    handleSubmit(event) { 
 
    alert('A name was submitted: ' + this.input.value); 
 
    event.preventDefault(); 
 
    } 
 

 
    render() { 
 
    return (
 
     <form onSubmit={this.handleSubmit}> 
 
     <label> 
 
      Name: 
 
      <input type="text" ref={(input) => this.input = input} /> 
 
     </label> 
 
     <input type="submit" value="Submit" /> 
 
     </form> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <NameForm />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>