Как достать реквизит с детского взгляда на реагировать родных - PullRequest
Новая
       1

Как достать реквизит с детского взгляда на реагировать родных

0 голосов
/ 05 июля 2019

У меня есть своеобразное реагирующее представление, подобное этому. 

<Parent>
 <Header/>
</Parent>

Заголовок также является видом с некоторыми полями для ввода текста и значками.Родитель - это еще одно представление, созданное путем добавления компонента Header.Поэтому я хочу, чтобы при вводе текста в текстовое поле, расположенное в представлении «Заголовок», я хотел перенести это значение в подпорки «Родительское представление».Как это сделать ???Я пробовал некоторые ответы, которые были показаны в StackOverflow.Но они не дали мне того, что я ожидал.

Для тех, кто хочет увидеть полный код, это родительский экран. 

export default class ParentScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      objects: null,
      indicator: true,
    };
  }

render(){
 <View style={styles.container}>
       <HeaderBar />
    </View>
}}

А это экран заголовка. 

export default class HeaderBar extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    searchEnabled: false
  };

  render() {
    return (
      <View style={styles.navigationBar}>
        <View style={styles.titleArea}>
          {this.state.searchEnabled === true ? (
            <View style={styles.titleArea}>
              <Icon
                name="arrow-back"
                type="Ionicons"
                color="black"
                onPress={() => this.setState({ searchEnabled: false })}
              />
              <TextInput
                placeholder="Search"
                placeholderTextColor="white"
                style={styles.input}
                onChangeText={text => this.setState({ filterKey: text })}
              />
            </View>
          ) : (
            <View style={styles.titleArea}>
               <Image
                  style={styles.profileImage}
                  source={require("../../images/user_image_1.jpg")}
                />
            </View>
          )}
        </View>
      </View>
    );
  }
}

1 Ответ

2 голосов
/ 05 июля 2019

Определите функцию в родительском представлении, что-то вроде: 

  onChangeText = (text) => {
    this.setState({
      myUpdatedText: text
    })
  }

Затем передайте это ребенку в качестве опоры: 

  <HeaderBar onChangeText={this.onChangeText} />

Так что в дочернем коде вы можете использовать его как: 

  <TextInput
    placeholder="Search"
    placeholderTextColor="white"
    style={styles.input}
    onChangeText={this.props.onChangeText}
  />
...