javascript - React Native Saving Input Data - Stack Overflow

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.

• javascript
• reactjs
• react-native

Share Follow asked May 31, 2016 at 23:41 bruhbruh 2,30588 gold badges3434 silver badges4444 bronze badges 1

• async storage should work. whats are the issues. – Sush Commented Jun 1, 2016 at 6:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

If 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