從表單反應中提取多個輸入的數據

Question

所以我對React還比較陌生。我想從三個表單輸入中獲取數據（並最終將其發佈到數據庫）。我一直在使用互聯網來幫忙，但我想在這裏嘗試我的運氣。就在這裏，我正在嘗試註銷輸入中的用戶文本。

import React from 'react'; 

export default class AddForm extends React.Component { 
constructor(props) { 
super(props); 
} 

handlePlace(e) { 
e.preventDefault(); 
    const text = this.place.value.trim(); 
    console.log(text); 
} 

handleDate(e) { 
    const text = this.date.value 
    console.log(text); 
} 

handleNotes(e) { 
    const text = this.notes.value 
    console.log(text); 
} 

render() { 
return(
    <form className="form"> 
    <h4>Add a Memory</h4><br></br> 
    <p className="add-info">Keep track of all the fun and amazing places you 
    have been.</p> 
    <input type="text" name="place" placeholder="place" ref={input => 
    this.place = input}></input><br></br> 
    <input placeholder="time" ref={input => this.date = input}></input><br> 
    </br> 
    <input className="notes" placeholder="notes" ref={input => this.notes = 
    input}></input><br></br> 
    <button className="save" type="button" onClick= 
    {this.handleSave}>Save</button> 
    </form> 
); 
} 
handleSave() { 
    console.log(this.handlePlace) 
    console.log(this.handleDate) 
    console.log(this.handleNotes) 
} 
} 

Answer 1

儘管可以使用ref做到這一點，但除非有必要，否則不建議實際觸摸dom。我認爲這將有助於 考慮這種「反應方式」。

在React中，應用程序的狀態驅動視圖，包括輸入。所以你應該做的是讓國家填充你輸入的值，然後更新狀態來改變這些輸入中的內容。事情是這樣的：

export default class AddForm extends React.Component { 
    constructor(props) { 
    super(props); 
    //change here 
    this.handlePlace = this.handlePlace.bind(this); 
    this.handleDate = this.handleDate.bind(this); 
    this.handleNotes = this.handleNotes.bind(this); 
    this.handleSave = this.handleSave.bind(this); 
    this.state = { 
    placeText: '', 
    timeText: '', 
    noteText: '', 
    }; 
} 
// all changed 
handlePlace(e) { 
    this.setState({ placeText: e.target.value }); 
} 

handleDate(e) { 
    this.setState({ dateText: e.target.value }); 
} 

handleNotes(e) { 
    this.setState({ notesText: e.target.value}); 
} 

render() { 
return(
    <form className="form"> 
    <h4>Add a Memory</h4><br></br> 
    <p className="add-info">Keep track of all the fun and amazing places you 
    have been.</p> 
    // change here 
    <input type="text" name="place" placeholder="place" value={this.state.placeText} onChange={(e) => this.handlePlace(e)}></input><br></br> 
    // change here. e is implicitly passed to the onChange handler 
    <input type="text" placeholder="time" value={this.state.dateText} onChange={this.handleDate}></input><br> 
    </br> 
    //change here 
    <input className="notes" placeholder="notes" value={this.state.notesText} onChange={this.handleNotes}></input><br></br> 
    <button className="save" type="button" onClick= 
    {this.handleSave}>Save</button> 
    </form> 
); 
} 
handleSave() { 
    console.log(this.state.placeText) 
    console.log(this.state.dateText) 
    console.log(this.state.notesText) 
} 
} 

這似乎有些單調乏味，但這種聲明樣式是值得的，從長遠來看，當你追捕的錯誤。通過應用程序跟蹤數據流將變得更加容易。