store value in view

src/components/Input.tsx

@@ -25,25 +25,38 @@ interface State {
   value: string
 }
 
-export default class Input extends Component<any, State> {
-  constructor() {
+interface Props {
+  value: string;
+  onSubmit: (text: string) => void;
+}
+
+export default class Input extends Component<Props, State> {
+  constructor(props : Props) {
     super();
     this.state = {
-      value: ''
+      value: props.value
     };
     this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
   handleChange(value : string) {
     this.setState({ value });
   }
 
+  handleSubmit() {
+    if (this.props.onSubmit) {
+      this.props.onSubmit(this.state.value);
+    }
+  }
+
   render() {
     return (
       <View style={styles.inputBorder}>
         <TextInput
           style={styles.input}
           value={this.state.value}
+          onSubmitEditing={this.handleSubmit}
           onChangeText={this.handleChange}
           autoCapitalize="none"
           underlineColorAndroid="transparent"
@@ -52,7 +65,6 @@ export default class Input extends Component<any, State> {
           blurOnSubmit
           enablesReturnKeyAutomatically />
       </View>
-
-    )
+    );
   }
 }

src/views/main.tsx

@@ -21,11 +21,27 @@ const styles = StyleSheet.create({
 });
 
 
-export default class App extends Component<any, any> {
+interface State {
+  text: string
+}
+
+export default class App extends Component<any, State> {
+  constructor() {
+    super()
+    this.state = {
+      text: ''
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(text : string) {
+    this.setState({ text });
+  }
+
   render() {
     return (
       <View style={styles.container}>
-        <Input />
+        <Input onSubmit={this.handleSubmit} value={this.state.text} />
         <Text style={styles.text}>
           Welcome to React Native!
         </Text>