我在React Native中按照我想要的方式重新开始工作时遇到了一些麻烦......
我希望能够做到以下几点:
render() {
...
<InputDBSync root={"foo/Hello word"} node="bar" />
<InputDBSync root={"foo/Hello word"} node="baz" />
...
}
如果firebase实例不存在,它应该创建(发布)它
hello world
foo
bar: ''
baz: ''
这是我的代码
import React, { Component } from 'react'
import { View } from 'react-native'
import { InputGroup, Input, Icon, Text} from 'native-base'
import DB from './DB'
export default class InputDBSync extends Component {
constructor(props){
super(props)
this.state = {
value: ""
}
this.syncDB = this.syncDB.bind(this)
}
syncDB() {
const path = `${this.props.root}/${this.props.node}`
this.ref = DB.syncState(
path,
{ context: this,
state: 'value' }
)
}
componentDidMount(){
const path = `${this.props.root}/${this.props.node}`
DB.fetch(path, { context:this })
.then( fetchdata => {
if (fetchdata == null) {
DB.post( path,
{ data: this.state.value } )
.then( this.syncDB )
} else {
this.syncDB
}})
.catch( error => console.error(error))
}
componentWillUnmount(){
DB.removeBinding(this.ref);
}
render () {
return (
<View>
<InputGroup borderType='underline'>
<Icon name="ios-beer-outline" />
<Input
value={this.state.value}
onChangeText={text => {
const copyState = {...this.state}
copyState.value = text
this.setState({ ...copyState })
}}
placeholder="Cheers"
/>
</InputGroup>
</View>
)
}
}
它没有用空值创建它..但是连接到它。所以,一旦我输入&#34;嗨&#34;进入巴兹它变成:
hello world
foo
baz: 'Hi'