javascript - 从附加到 ScrollView 的组件更新 react native 中的父组件

Question

我的 HomeScreen 中有 ScrollView ，其中的 measures 是 Measure 组件的数组。

<ScrollView>{measures}</ScrollView>

我的 Measure 组件如下所示:

class Measure extends Component {
  render() {
    return (
      <View key={this.props.keyval}>
        <TouchableOpacity onPress={deleteItem(this.props.val.measure_id)}>
          <Text style={styles.measure}>
            ID: {this.props.val.measure_id}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
  deleteItem(id) {
    // delete item
    );
  }
}

我的问题是，如何通知父组件HomeScreen Measure已被删除以重新加载 ScrollView 项？或者也许您有更好的想法:

1. 显示措施
2. 删除 onPress 项中的一项
3. 在 ScrollView 中重新加载项目

感谢任何建议

Answer 1

在你的情况下应该是这样的:

class HomeScreen extends Component {
  state = {
    measures: []
  };

  handleDelete = (id) => {
    // item was deleted
  }

  render() {
    const { measures } = this.state;

    const measuresList = measures.map(measure => (
      <Measure 
         key={measure.measure_id}
         onDelete={this.handleDelete}
         val={measure}
      />
    ));

    return (
     <ScrollView>{measuresList}</ScrollView>
    );
  }
}


class Measure extends Component {
  render() {
    return (
      <View key={this.props.keyval}>
        <TouchableOpacity onPress={deleteItem(this.props.val.measure_id)}>
          <Text style={styles.measure}>
            ID: {this.props.val.measure_id}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
  deleteItem(id) {
    const { onDelete } = this.props;
    // delete item
    onDelete(id); //will call parent method.
  }
}