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

是的，这正是你应该做的。您在父状态下创建一个处理程序，并将其作为prop。传递给子组件。

＆＃13;

// 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

＆＃13;

Answer 2

您应该通过props传递回调来处理组件的句柄输入文本更改，并使用输入文本的onChange事件从子组件调用该句柄。如果输入文本没有onChange（或类似的东西），你可以使用onKeyUp。但一般的想法是你通过道具从父母发送一个回调给孩子，你从孩子那里调用它来发送数据给父母。

将输入文本从组件传递回父级

2 个答案: