將輸入文本傳回組件

Question

我正在使用自動擴展文本輸入字段（Link），並將其作爲組件創建。我的問題是什麼時候文本被改變了，我如何將數據的值傳遞給父項？我希望能夠通過父母提交輸入，所以我正在考慮將輸入值存儲在父母狀態中。

家長

使用<InputExpand />

render() { 

    const { navigate } = this.props.navigation; 

    console.log("Rendering"); 

    return (
     <KeyboardAvoidingView behavior="padding" style={{flex: 1}}> 
     <View style={{flex: 1}}> 
      <StatusBar hidden={true} /> 
      <View style={styles.headerBar}> 
       <NavBar navigation={this.props.navigation} goBack={this.goBack} title="MESSAGE DETAILS" backButton={true} showNewMessage={true} /> 
      </View> 
      <View style={styles.contentWrapper}> 
       <ListView 
         dataSource={this.state.dataSource} 
         renderRow={this.renderRow} 
         enableEmptySections={true} 
         style={styles.listWrapper} 
        /> 
      </View> 
      <View style={styles.footerBar}> 
        <View style={styles.footerBtnContainer}></View> 
        <View style={styles.footerInputContainer}> 
         <InputExpand /> 
        </View> 
        <View style={styles.footerBtnContainer}> 
         <Image source={require('../../images/icons/IconSend.png')} style={{width: 20, height: 20}}/> 
        </View> 
      </View> 
     </View> 
     </KeyboardAvoidingView> 
    ); 
    } 

組件調用子組件 - （兒童）

import React, { Component } from 'react' 

const { 
    TextInput, 
    StyleSheet, 
} = require('react-native'); 

export default class AutoExpandingTextInput extends React.Component { 
    state: any; 

    constructor(props) { 
    super(props); 
    this.state = {text: '', height: 0}; 
    } 
    render() { 
    return (
     <TextInput 
     {...this.props} 
     multiline={true} 
     onChange={(event) => { 
      this.setState({ 
      text: event.nativeEvent.text, 
      height: event.nativeEvent.contentSize.height, 
      }); 
     }} 
     style={[styles.default, {height: Math.max(35, this.state.height)}]} 
     value={this.state.text} 
     placeholder={"Type a message..."} 
     placeholderTextColor={"#fff"} 
     /> 
    ); 
    } 
} 

var styles = StyleSheet.create({ 
    default: { 
    color: "#fff", 
    fontSize: 10, 
    fontFamily: "Avenir-Light", 
    }, 
}); 

Answer 1

是的，這正是你應該做的。您可以在父狀態中創建一個處理程序，並將其作爲道具傳遞給子組件。

// parent component 
 

 
// assuming a property inputText exists in the state 
 
// and use arrow function to preserve the context of `this` to be of the parent class. 
 
onChangeTextHandler = (e) => { 
 
    this.setState({ 
 
    // get the value from TextInput onChangeText event 
 
    inputText: e.value, 
 
    }) 
 
} 
 

 
render() { 
 

 
    const { navigate } = this.props.navigation; 
 

 
    console.log("Rendering"); 
 

 
    return (
 
     <KeyboardAvoidingView behavior="padding" style={{flex: 1}}> 
 
     <View style={{flex: 1}}> 
 
      <StatusBar hidden={true} /> 
 
      <View style={styles.headerBar}> 
 
       <NavBar navigation={this.props.navigation} goBack={this.goBack} title="MESSAGE DETAILS" backButton={true} showNewMessage={true} /> 
 
      </View> 
 
      <View style={styles.contentWrapper}> 
 
       <ListView 
 
         dataSource={this.state.dataSource} 
 
         renderRow={this.renderRow} 
 
         enableEmptySections={true} 
 
         style={styles.listWrapper} 
 
        /> 
 
      </View> 
 
      <View style={styles.footerBar}> 
 
        <View style={styles.footerBtnContainer}></View> 
 
        <View style={styles.footerInputContainer}> 
 
         <InputExpand onChangeTextHandler= {this.onChangeTextHandler}/> 
 
        </View> 
 
        <View style={styles.footerBtnContainer}> 
 
         <Image source={require('../../images/icons/IconSend.png')} style={{width: 20, height: 20}}/> 
 
        </View> 
 
      </View> 
 
     </View> 
 
     </KeyboardAvoidingView> 
 
    ); 
 
    } 
 

 
// Child Component 
 
import React, { Component } from 'react' 
 

 
const { 
 
    TextInput, 
 
    StyleSheet, 
 
} = require('react-native'); 
 

 
export default class AutoExpandingTextInput extends React.Component { 
 
    state: any; 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.state = {text: '', height: 0}; 
 
    } 
 
    render() { 
 
    const { onChangeTextHandler } = this.props; 
 
    return (
 
     <TextInput 
 
     {...this.props} 
 
     multiline={true} 
 
     onChange={(event) => { 
 
      // set the state of parent component here... 
 
      onChangeTextHandler(event.nativeEvent.text); 
 
      this.setState({ 
 
      text: event.nativeEvent.text, 
 
      height: event.nativeEvent.contentSize.height, 
 
      }); 
 
     }} 
 
     style={[styles.default, {height: Math.max(35, this.state.height)}]} 
 
     value={this.state.text} 
 
     placeholder={"Type a message..."} 
 
     placeholderTextColor={"#fff"} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
var styles = StyleSheet.create({ 
 
    default: { 
 
    color: "#fff", 
 
    fontSize: 10, 
 
    fontFamily: "Avenir-Light", 
 
    }, 
 
}); 
 
reactjs react-native

Answer 2

你應該通過道具傳爲手柄輸入文本回調更改組件，並使用inpu的onChange事件t文本從子組件調用該句柄。如果輸入文本沒有onChange（或類似的東西），你可以使用onKeyUp。但總的想法是，您通過道具從父母發送回調給孩子，並且您從孩子向父母發送數據。