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

Posted 2023-02-19

【中文标题】在这种情况下如何使 TextInput 成为一个单独的组件

【英文标题】：How to make TextInput a separated component in this case

【发布时间】：2017-09-09 00:56:45

【问题描述】：

我有一个可用的 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组件成为容器组件）

但是，在 Ask Component 中，我不知道如何检索 Input Component 的 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>
    )
  

问.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>
    );
  

【参考方案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>
    )
  

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

【讨论】：

嗨，谢谢。它有效！但我很困惑。我以为只有 Ask 组件可以控制并向 Input 组件发送数据。在您的代码中，似乎 Input 组件将数据/文本发送到 Ask 组件。这对我来说很奇怪。

我们可以双向进行。根据我的回答，我们正在询问组件中捕获提交和更改事件，另一种方式是我们可以将输入状态作为参数发送到询问组件功能。