フォーム内の複数の入力からデータを抽出する

Question

まだ私はReactにはまだ新しいです。私は3つのフォーム入力からデータを取得したい（そして最終的にはデータベースにポストする）。私は助けるためにインターネットを使っていますが、私はここで私の運を試すと思った。ここでは、ユーザーのテキストが入力にどのようなものであるかをログアウトしようとしています。

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に触れないことをおすすめします。私はこのことを「反応する方法」と考えるのが助けになると思っています（ ）。

では、アプリケーションの状態は入力を含むビューを駆動する、反応します。だからあなたがしなければならないことは、あなたの入力の値を入力して状態を更新し、それらの入力を変更することです。このような何か：

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) 
} 
} 

それは退屈なようだが、あなたはバグを追い詰めるしているときに、この宣言型のスタイルは本当に長期的に報わ。アプリケーションを通じてデータの流れを追跡する方が簡単になります。