Question

我有一个正在使用的React-Native组件，该组件中生成了一个列表，其中包含每个项目列表中的状态。我希望从每个项目中获取的状态是是否已“选中”。

在父组件中，我有一个按钮，然后有一个生成的列表，然后为列表项创建一个子组件。我将如何做到这一点，以便在单击按钮时可以注销是否已“选中”每个项目的状态。

我的主要目的是创建一个项目列表，以保存是否选中该项目。

import React, { Component } from 'react';
import { View, 
  Platform, 
  Image, 
  Text, 
  Button, 
  ScrollView, 
  ListView,
  AsyncStorage
} from 'react-native';
import { connect } from 'react-redux';


import Expo from 'expo';
import SettingsTeams from '../components/SettingsTeams';

import { STATUS_BAR_HEIGHT, SCREEN_WIDTH } from '../constants';




class Settings extends Component {

  componentWillMount() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(this.props.leagueteams.MLS);
  }

  renderRow(leagueteams) {
    return <SettingsTeams leagueteams={leagueteams} />;
  }

  state = {
    appIsReady: false
  }

  render() {
    console.log("props", this.props.leagueteams.MLS, "EPL", this.props.leagueteams.EPL)
    const { leagueteams } = this.props.leagueteams

    const { listStyle, listBuffer,saveButton, buttonContainer } = styles;

    return (
      <View style={listStyle}>
        <View style={buttonContainer}>
          <Button 
            title="Save Selection"
            color="#FFFFFF"
            onPress= {() => console.log("button pressed")}
            style= {saveButton} />
        </View>

        <View style={listBuffer}>
          <ListView
          dataSource={this.dataSource}
          renderRow={this.renderRow}
          />
        </View>
      </View>

    );
  }
}

const mapStateToProps = state => {
  return { leagueteams: state.leagueteams };
};

export default connect(mapStateToProps) (Settings);

Answer 1

听起来您可能想将项目的checked状态提升到“设置”组件，或者，因为您使用的是Redux，请使用存储而不是组件状态。通过将值传递到列表项并处理Settings组件中的checked事件，可以管理onChange状态。然后，在“设置”组件中按下按钮时，无论您选择哪种设置，都可以从“设置”状态或Redux存储中读取checked状态。保持单个列表项中的checked状态使得按下按钮时很难从父级访问。有关更深入的说明，请参见Lifting State Up上的官方文档（网络示例，但原理相同）。

从父组件反应生成列表的本机/ Redux状态

1 个答案: