React-Native-Paper Chip组件 onPress触发显示组件问题求助

你的核心问题是直接在事件处理函数里写JSX不会触发组件渲染——React组件的渲染是由状态驱动的，只有当状态更新时，组件才会重新渲染并展示对应的UI。你当前的onPressChip函数只是返回了JSX片段，但没有将其纳入组件的渲染流程，所以点击Chip后不会有任何变化。

具体修改步骤： #

1. 添加状态控制按钮显示：在GradingList组件中使用useState定义控制Add按钮显示的状态。
2. 传递事件处理函数到子组件：把更新状态的函数通过props传递给Item组件，让Chip能触发状态变更。
3. 根据状态渲染按钮：在GradingList的JSX中，根据状态值决定是否渲染Add按钮。

修改后的完整代码： #

import React, { useState } from 'react';
import { View, SafeAreaView, FlatList } from 'react-native';
import { Chip, Button } from 'react-native-paper';

const Item = ({ title, onPressChip }) => (
  <View>
    <Chip onPress={onPressChip} style={{ margin: 'auto' }}>
      {title}
    </Chip>
  </View>
);

const GradingList = ({ DATA }) => {
  // 定义控制Add按钮显示的状态，初始为隐藏
  const [showAddButton, setShowAddButton] = useState(false);

  // 点击Chip时更新状态，显示按钮
  const onPressChip = () => {
    setShowAddButton(true);
  };

  // 点击Add按钮的逻辑（根据你的需求补充）
  const onClickAddButton = () => {
    console.log('Add button clicked');
    // 可以在这里添加按钮点击后的操作，比如隐藏按钮、提交数据等
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={DATA}
        horizontal={true}
        renderItem={({ item }) => <Item title={item.name} onPressChip={onPressChip} />}
        keyExtractor={item => item.id}
      />
      {/* 根据状态决定是否渲染Add按钮 */}
      {showAddButton && (
        <View style={{ flexDirection: 'row-reverse', marginTop: 10 }}>
          <Button
            disabled={false}
            icon={'plus'}
            mode="contained"
            onPress={onClickAddButton}
            color={'#0AB155'}
            style={{ left: 0, marginTop: 5 }}>
            {'Add'}
          </Button>
        </View>
      )}
    </SafeAreaView>
  );
};

export default GradingList;

关键改动说明： #

• 把onPressChip移到GradingList内部，通过props传递给Item，确保状态能被正确更新。
• 使用useState创建showAddButton状态，点击Chip时将其设为true，触发组件重新渲染。
• 在GradingList的返回JSX中，用{showAddButton && ...}的条件渲染语法，只有当状态为true时才显示Add按钮。

内容的提问来源于stack exchange，提问作者Milindi Senevirathne