Firebase 在这种情况下，如何使TextInput成为一个单独的组件

我有一个可工作的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>
    );
  }
}

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

从“React”导入React；
进口{
形象,，
链接，
平台，
滚动视图，
样式表，
文本，
可触摸不透明度，
看法
ListView，
文本输入，
}从“反应本机”；
从“../components/Input”导入输入；
从“../Firebase”导入{firebaseApp}；
导出默认类Ask扩展React.Component{
建造师（道具）{
超级（道具）；
this.itemsRef=firebaseApp.database（）.ref（）；
此.state={
文本：“”
};
}
附加项（）{
this.itemsRef.push（{title:this.state.text}）
this.setState（{text:'}）
}
render（）{
返回(
//////这是错误的
{/*此处有许多其他组件*/}
);
}
}

更新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:''
    };

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

从“React”导入React；
进口{
形象,，
链接，
平台，
滚动视图，
样式表，
文本，
可触摸不透明度，
看法
ListView，
文本输入，
}从“反应本机”；
从“../components/Input”导入输入；
从“../Firebase”导入{firebaseApp}；
导出默认类Ask扩展React.Component{
建造师（道具）{
超级（道具）；
this.itemsRef=firebaseApp.database（）.ref（）；
此.state={
文本：“”
};
this.inputChange=this.inputChange.bind（this）；
this.additem=this.additem.bind（this）；
}
附加项（）{
this.itemsRef.push（{title:this.state.text}）
this.setState（{text:'}）
}
输入更改（输入的文本）{
this.setState（{text:entered_text}）
}
render（）{
返回(
//////这是错误的
{/*此处有许多其他组件*/}
);
}
}

及

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={ this.props.inputChange }
        onSubmitEditing= {this.props.AddItem}
      >
      </TextInput>
    )
  }
}

import React，{Component}来自“React”
从“react native”导入{View，Text，StyleSheet，TextInput，PropTypes}
导出默认类输入扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={text:'}
}
render（）{
返回(
)
}
}

---

现在输入组件将更新Ask组件的状态。

您好，谢谢。它起作用了！但是我很困惑。我认为只有Ask组件可以控制并向输入组件发送数据。在您的代码中，输入组件似乎向Ask组件发送数据/文本。这对我来说很奇怪，我们两种方法都可以。根据我的回答，我们正在ask组件中捕获提交和更改事件，另一种方法是将输入状态作为参数发送给ask组件函数。

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>
    )
  }
}