0
React-Bootstrapを使用していて、入力フォームの値を取得してFirebaseに保存したいとします。 React-Bootstrapを使用する前に、ref, but now I am not able to do that after using FormGroups`を使用して、入力とテキスト領域の値を取得できました。フォームを提出すると、入力とテキストエリアから値を取得できません。React-BootstrapのFormgroupコンポーネントでフォーム値を取得できません
私はこの問題に関する以前の記事を見ましたが、これらの解決策は実際には機能していないようです。
私はReact初めてです。 Formgroupsを使用してフォーム値を取得する方法を教えてください。ここで
import React from 'react'
import ReactDOM from 'react-dom'
import {withRouter} from 'react-router'
import './NewListPage.css'
import Header from './Header'
import ListItem from './ListItem'
import database from '../database'
import Form from './Form'
import {
Button,
FormGroup,
FormControl,
Feedback,
ControlLabel
} from 'react-bootstrap';
class NewListPage extends React.Component {
// bring props into constructor
constructor(props) {
// bring props into super
super(props)
//create list uuid this needs to be A better uuid genereator in the future
const listId = Math.floor((Math.random() * 10000) + 1)
this.state = {
wishList: {
items: []
},
wishListItems: []
}
this.addListItem = this.addListItem.bind(this) //bind the add list item function to this component
this.removeListItem = this.removeListItem.bind(this) //needed to bind update order to root class
this.saveListItem = this.saveListItem.bind(this) //bind to root class
}
addListItem(e) { //add another item to the array
e.preventDefault()
// never change state directly, make a copy instead
const wishList = Object.assign({}, this.state.wishList)
//push a new item to items object
wishList.items.push({title: 'title', description: 'description'})
this.setState({
//update the state
wishList
})
}
// remove items from array
removeListItem(index) {
// never change state directly, make a copy instead
const wishList = Object.assign({}, this.state.wishList)
//remove item object from items array using its index
wishList.items.splice([index], 1)
this.setState({
//update the state from the new array
wishList
})
}
// save list item into dB
saveListItem(event) {
// upon submit, prevent whole page from refreshing
event.preventDefault()
// never change state directly, make a copy instead
const wishList = Object.assign({}, this.state.wishList)
// grab the title
wishList.title = this.refs.title.value
// grab the description
wishList.description = this.refs.description.value
// for each item in the list grab its properties
wishList.items.map((item, index) => {
// grab descritions and title from generated form
item.description = this.refs.list.children[index].children.itemdescription.value
item.title = this.refs.list.children[index].children.itemtitle.value
})
// push the wishlist to firebase (need to add code to handle errors.)
// we use push so that firebase will generate its own uuid
database.push('wishLists', {
data: wishList
// if it saves then resolve this promise and push the uuid to users/uid/wishLists
}).then(newList => {
database.push(`users/${this.props.currentUser.uid}/wishLists`, {
// newList.key contains the firebase uuid from the previous push
data: newList.key
// if this also saves then redirect
}).then(finished => {
//redirect to dashboard
this.props.history.push('/')
})
})
}
render() {
return (
<div>
<h1>Create a New Wishlist</h1>
<div className="ListForm">
<Row>
<Col sm={3}/>
<Col sm={6}>
<form onSubmit={this.saveListItem.bind(this)}>
<FormGroup>
<ControlLabel>Wishlist Title</ControlLabel>
<br/>
<FormControl type="text" name="title" ref="title" required="true" placeholder="Enter text"/>
<FormControl.Feedback/>
<br/>
<FormGroup controlId="formControlsTextarea">
<ControlLabel>Wishlist Description Optional</ControlLabel>
<FormControl componentClass="textarea" placeholder="textarea" name="description" ref="description"/>
</FormGroup>
<br/>
<div className="ListItems" ref="list">
{this.state.wishList.items.map((item, index) => {
return <ListItem removeListItem={this.removeListItem} myIndex={index} key={index}/>
})}
</div>
<Button bsStyle="primary" type="button" onClick={this.addListItem}>ADD ITEM</Button><br/><br/>
<input type="submit" value="Save List" ref="save"/>
</FormGroup>
</form>
</Col>
</Row>
</div>
</div>
)
}
}
// export with router
export default withRouter(NewListPage)ウィンドウのコンソールログからのエラーメッセージです。
