Как использовать onPress с плоским списком - PullRequest
Новая
       6

Как использовать onPress с плоским списком

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

Я пытаюсь построить FlatList в реагировать родной.У меня проблема с onPress опорой, и я пытаюсь заставить его работать с FlatList.Проблема в том, что onPress будет срабатывать для каждого элемента в списке вместо тех, на которые я специально нажимаю.

Это Flatlist в моем компоненте: 

           <FlatList
              data = {this.state.dataSource}
              renderItem = {({item}) => <PickerBox title = {item.c_syn_name} onPress = {this._onPress(item.c_syn_name)} />}
              keyExtractor = {(item, index)=> item.c_syn_name}
              backgroundColor = "thistle"

            />

Это компонент PickerBox: 

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: "row",
        padding: 10,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8,
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: "slategrey",
        elevation: 2
      },
      shadow: {
        flex: 1,
        flexDirection: "row",
        padding: 0,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8,
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: "darkslategray",
        elevation: 2
      },
      title: {
        fontSize: 16,
        color: "#000"
      },
      container_text: {
        flex: 1,
        flexDirection: "column",
        marginLeft: 12,
        color: "#FFF"
      },
      description: {
        fontSize: 11,
        fontStyle: "italic"
      }
    });

    class PickerBox extends Component<props> {
      render() {
        const { title } = this.props;
        return (
          <View style={styles.shadow}>
            <View style={styles.container}>
              <Text
                style={styles.container_text}
                onPress={() => this.props.onPress}
              >
                {title}
              </Text>
            </View>
          </View>
        );
      }
    }
    export default PickerBox;

Это моя функция onPress, она находится в компоненте, который содержит мой плоский список, и проходит через props в функции PickerBox:

    _onPress = newName => {
        this.setState({ newTaxon: newName });
        Alert.alert("New Taxon: "+this.state.newTaxon.toString());
    };

Поведение таково, что Alert будет появляться для каждого элемента списка, в то время как он должен подходить только для элементов, которые я специально нажимаю.

1 Ответ

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

Вы немедленно вызываете свой onPress обратный вызов в renderItem на этой строке: 

onPress = {this._onPress(item.c_syn_name)}

, что означает, что onPress получает результат _onPress.Вот почему вы получаете это предупреждение каждый раз.Вам нужно дать onPress функцию для вызова.Простой способ сделать это - сделать что-то вроде этого: 

onPress={() => this._onPress(item.c_syn_name)}

Оборачивая его в функцию стрелки, _onPress вызывается не сразу при рендеринге FlatList.Значение _onPress имеет функцию для вызова.

...