admin管理员组文章数量:1332962
I would like to have two text fields:
- one that accepts a title
- another that accepts a body (i.e. more text)
...and a submit button:
- that saves the title and body that was entered, when clicked
I have researched TextInput, AsyncStorage, TouchableHighlight and Navigator ponents as well as a bunch of react-native tutorials. I can't seem to find any consistency - not even from the react-native docs.
Here is what I have so far:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
TextInput,
TouchableHighlight
} from 'react-native';
class PostAndSave extends Component {
constructor(props) {
super(props);
this.state = {
messageTitle: '',
messageBody: ''
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.wele}>
Walker app
</Text>
<TextInput
placeholder="Title"
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChange={(event) => this.setState({messageTitle: event.nativeEvent.text})}
value={this.state.messageTitle} />
<TextInput
placeholder="Body"
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChange={(event) => this.setState({messageBody: event.nativeEvent.text})}
value={this.state.messageBody} />
<TouchableHighlight onPress={this._onPressButton} style={styles.button}>
<Text style={styles.buttonText}>See all posts</Text>
</TouchableHighlight>
</View>
);
}
}
// styles here
AppRegistry.registerComponent('PostAndSave', () => PostAndSave);
I can type into the input fields but cannot figure AsyncStorage out, or how to post new messages as opposed to the overwriting the existing one. I'm mainly looking for help in that area - below I have posted my goal incase the question of why I want to do this es up.
Goal:
The saved 'post' should then be printed to a view, where it can be pressed (tapped?) to display the contents of the body.
Each time a title and body are submitted they should be saved as a new 'post' and not overwritten.
I would like to have two text fields:
- one that accepts a title
- another that accepts a body (i.e. more text)
...and a submit button:
- that saves the title and body that was entered, when clicked
I have researched TextInput, AsyncStorage, TouchableHighlight and Navigator ponents as well as a bunch of react-native tutorials. I can't seem to find any consistency - not even from the react-native docs.
Here is what I have so far:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
AsyncStorage,
TextInput,
TouchableHighlight
} from 'react-native';
class PostAndSave extends Component {
constructor(props) {
super(props);
this.state = {
messageTitle: '',
messageBody: ''
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.wele}>
Walker app
</Text>
<TextInput
placeholder="Title"
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChange={(event) => this.setState({messageTitle: event.nativeEvent.text})}
value={this.state.messageTitle} />
<TextInput
placeholder="Body"
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChange={(event) => this.setState({messageBody: event.nativeEvent.text})}
value={this.state.messageBody} />
<TouchableHighlight onPress={this._onPressButton} style={styles.button}>
<Text style={styles.buttonText}>See all posts</Text>
</TouchableHighlight>
</View>
);
}
}
// styles here
AppRegistry.registerComponent('PostAndSave', () => PostAndSave);
I can type into the input fields but cannot figure AsyncStorage out, or how to post new messages as opposed to the overwriting the existing one. I'm mainly looking for help in that area - below I have posted my goal incase the question of why I want to do this es up.
Goal:
The saved 'post' should then be printed to a view, where it can be pressed (tapped?) to display the contents of the body.
Each time a title and body are submitted they should be saved as a new 'post' and not overwritten.
Share asked May 31, 2016 at 23:41 bruhbruh 2,3058 gold badges34 silver badges44 bronze badges 1- async storage should work. whats are the issues. – Sush Commented Jun 1, 2016 at 6:25
1 Answer
Reset to default 3If you want to use Async for this you'll need a function to save the data:
_onPressButton () {
// Get the data
let title = this.state.messageTitle
let message = this.state.messageBody
// Retrieve the existing messages
AsyncStorage.getItem('messages', (res) => {
var messages
// If this is the first time, set up a new array
if (res === null) {
messages = []
}else {
messages = JSON.parse(res)
}
// Add the new message
messages.push({
title: title,
message: message
})
// Save the messages
AsyncStorage.setItem('messages', JSON.stringify(messages), (res) => {})
}
}
And you'll want to bind this to your instance:
<TouchableHighlight onPress={this._onPressButton.bind(this)} style={styles.button}>
And to retrieve your messages for use later:
AsyncStorage.getItem('messages', (res) => {
this.setState({
messages: res
})
})
本文标签: javascriptReact Native Saving Input DataStack Overflow
版权声明:本文标题:javascript - React Native Saving Input Data - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742267008a2443593.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论