从表单反应中提取多个输入的数据

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

这似乎有些单调乏味，但这种声明样式是值得的，从长远来看，当你追捕的错误。通过应用程序跟踪数据流将变得更加容易。