firebase - この場合、TextInput を別のコンポーネントにする方法

Question

私は動作中の ASK コンポーネントを持っています。基本的にはユーザー入力を受け取り、Firebase データベースにプッシュします。

import React from 'react';
import {
  Image,
  Linking,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ListView,
  TextInput,
} from 'react-native';

import Input from '../components/Input';
import {firebaseApp} from '../Firebase';

export default class Ask extends React.Component {
  constructor(props) {
    super(props);
    this.itemsRef = firebaseApp.database().ref();
    this.state = {

      text:''
    };
  }
  additem(){

    this.itemsRef.push({ title: this.state.text })
    this.setState({text:''})
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.textinput}
          placeholder="Insert Item Here!"
          onChangeText={(text) => this.setState({text})}
          onSubmitEditing= {this.additem.bind(this)}
          value={this.state.text}
        >
        </TextInput>
        {/* Many other components here */}
      </View>
    );
  }
}

TextInputコンポーネントを別ファイルに移動したい(INPUTコンポーネントを作成する)。(INPUTコンポーネントをプレゼンテーションコンポーネントにし、ASKコンポーネントをコンテナコンポーネントにする)

textただし、Ask Component では、Input Component の状態値を取得して呼び出す方法がわかりません。this.itemsRef.push({ title: THE_TEXT_STATE_VALUE_OF_INPUT_COMPONENT })

これが私のコードです。

入力.js

import React, { Component } from 'react'
import { View, Text, StyleSheet,TextInput,PropTypes} from 'react-native'


export default class Input extends React.Component {

  constructor(props) {
    super(props);
    this.state = {text:''}
  }
  render() {
    return (
      <TextInput style={styles.textinput}
        placeholder = {this.props.placeholder}
        onChangeText={(text) => this.setState({text})}
        onSubmitEditing= {this.props.AddItem}
      >
      </TextInput>
    )
  }
}

Ask.js

import React from 'react';
import {
  Image,
  Linking,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ListView,
  TextInput,
} from 'react-native';

import Input from '../components/Input';
import {firebaseApp} from '../Firebase';

export default class Ask extends React.Component {
  constructor(props) {
    super(props);
    this.itemsRef = firebaseApp.database().ref();
    this.state = {

      text:''
    };
  }
  additem(){

    this.itemsRef.push({ title: this.state.text })
    this.setState({text:''})
  }
  render() {
    return (
      <View style={styles.container}>
        <Input
          placeholder="Inser here" AddItem={this.additem.bind(this)}> ////// THIS IS WRONG
        </Input>
        {/* Many other components here */}
      </View>
    );
  }
}