Как вы вызываете родительскую функцию из дочернего компонента (с параметрами) в Reaction-native? - PullRequest
Новая
       44

Как вы вызываете родительскую функцию из дочернего компонента (с параметрами) в Reaction-native?

1 голос
/ 01 ноября 2019

У меня есть реактивный компонент под названием HomeHeader. В HomeHeader лежит компонент без сохранения состояния, который называется SearchResultFlatList. В SearchResultFlatList находится компонент без сохранения состояния, который называется SearchListItem. HomeHeader имеет 2 поля ввода (одно для местоположения и одно для пункта назначения). После ввода в поле ввода SearchResultFlatList создается и повторно заполняется с помощью SearchListItems (каждый раз, когда я что-то печатаю (например, поиск в Google)) . При нажатии SearchListItem я хотел бы иметь возможность вызвать функцию, находящуюся в HomeHeader. Для этого необходимо щелкнуть SearchListItem и заполнить соответствующее поле ввода в HomeHeader.

Я объявил функцию в HomeHeader, которая называется onLocationPress. Он принимает один аргумент (т.е. onLocationPress (locationValue)). Очень просто передать ссылку на эту функцию дочерним компонентам, но становится сложнее, когда переменная задействована.

Из HomeHeader.js 

<SearchResultFlatList
   containerOpacity={this.state.opacityProp}
   headerExpanded={this.state.headerExpanded}
   results={this.props.searchResults}
   clickLocationResult={this.onLocationPress}
/>

Из SearchResultFlatList.js

const SearchResultFlatList = (props) => {
    return(
        <Animated.View>
        <FlatList
          ....
            <SearchListItem
                clickLocationResult={props.clickLocationResult}
                primaryText={item.primaryText}
                fullText={item.fullText}
            />)}
          ....
        />
    </Animated.View>
    )
}

Из SearchListItem.js 

const SearchListItem = (props) => {

    return (
        <TouchableOpacity 
            style={styles.searchListItemContainer}
            onPress={props.clickLocationResult(props.primaryText)}
        >
        ....
        </TouchableOpacity>
    );
  }

Вызов этого способа приводит к тому, что функция вызывается так много раз. У меня также есть функция onTextChanged() в поле ввода, и каждый раз, когда я набираю, она записывает значение props.primaryText.

Я думаю, что это как-то связано с тем, что каждый раз, когда я печатаюновые SearchListItems создаются, но я не знаю, как это сделать.

Ответы [ 2 ]

1 голос
/ 01 ноября 2019

Вы не можете передать функцию onPress с параметрами. Вместо этого определите функцию стрелки, которая выполняет ваш clickLocationResult с параметром, подобным так. 

const SearchListItem = props => {
  return (
    <TouchableOpacity
      style={styles.searchListItemContainer}
      onPress={() => props.clickLocationResult(props.primaryText)}
    >
      ....
    </TouchableOpacity>
  );
};
0 голосов
/ 01 ноября 2019

Можете ли вы опубликовать, как ваша функция onLocationPress выглядит в HomeHeader?

Я подозреваю, что вам нужно то, что называется функцией каррирования. Есть много ресурсов по этому вопросу, но основная идея заключается в том, что ваша функция будет определяться следующим образом: 

function onLocationPress(text) {
    // this is your click handler
    return () => {
        // do something with that text
    }
}

Когда вы предоставляете обработчику onPress функцию с параметром, эта функцияEXECUTED, и результат возвращается обработчику, в отличие от самой функции. Вы хотите, чтобы onLocationPress была функцией, которая возвращает другую функцию .

...