在这种情况下如何使 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状态值，以便我可以调用this.itemsRef.push({ title: THE_TEXT_STATE_VALUE_OF_INPUT_COMPONENT })

这是我的代码。

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

和

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

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

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

How to make TextInput a separated component in this case

firebase

react-native

firebase-realtime-database

expo