この場合、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コンポーネントを作成する）。

ただし、コンポーネントを依頼中で、私はここでthis.itemsRef.push({ title: THE_TEXT_STATE_VALUE_OF_INPUT_COMPONENT })

を呼び出すことができるように、入力コンポーネントのtext状態値を取得する方法がわからない（INPUTコンポーネントプレゼンテーションコンポーネント作成、およびコンポーネントにコンテナコンポーネントをASK）私のコードです。

Input.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> 
    ); 
    } 
} 

Answer 1

以下のようなあなたのAsk.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={ this.props.inputChange } 
     onSubmitEditing= {this.props.AddItem} 
     > 
     </TextInput> 
    ) 
    } 
} 

Input.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:'' 
    }; 

    this.inputChange = this.inputChange.bind(this); 
    this.additem = this.additem.bind(this); 
    } 
    additem(){ 
    this.itemsRef.push({ title: this.state.text }) 
    this.setState({text:''}) 
    } 

    inputChange(entered_text){ 
    this.setState({text: entered_text }) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Input 
      placeholder="Inser here" AddItem={ this.additem } inputChange={ this.inputChange }> ////// THIS IS WRONG 
     </Input> 
     {/* Many other components here */} 
     </View> 
    ); 
    } 
} 

と

今入力コンポーネントは、コンポーネントを依頼の状態を更新します。