создать несколько выбора (выпадающий) в плоский список и обрабатывать выбранные состояния реагировать родной

Question

Я хочу создать форму в плоском списке, содержащем подборщик (выпадающий) для заголовка.Предположим, что есть 3 человека, представление списка создаст контейнеры формы, и у каждого будет основная информация, такая как имя, фамилия и заголовок с помощью выбора.Я смог создать форму, используя плоский список.Я не могу обработать выбранное значение множественного средства выбора.

Это то, что я сделал, но не обновляю состояние, в котором я ошибаюсь

const data = [
  {name: 'one'},
  {name: 'two'},
];
const newTitles = [];

export default class BusBookingPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      titleArray:[],
    };
  }

  componentDidMount(){
    newTitles = this.state.titleArray.slice() 
    for (var i = 0; i < data.length; i++) {
      newTitles[i]='Mr';
    }
    this.setState({titleArray: newTitles})
  }

  onValueChange(index: string,value: number) {
    var my_array = this.state.titleArray.slice() 
    for (var i = 0; i < data.length; i++) {
      if(index==i){ my_array.splice(i, 1, value)}
    }
    this.setState({titleArray: my_array}) 
  }


  renderItem = ({ item, index }) => {
    const itemsArray = this.state.titleArray;
    var title;
    if(index==0){
      title = "Primary Passenger";
    }else{
      title = "Co-Passenger " + index;
    } 
    return (
      <View>
        <Card style={styles.ContainerCardStyle}>
          <View style={styles.CardContainer}>
            <CardItem>
              <View style={{flex:1}}>
                <View style={{flexDirection: 'row',flex:1}}>
                  <Text style={styles.CardTitleText}>{title}</Text>
                  <View style={{backgroundColor: '#f2f2f2'}}>
                    <Text style={[styles.CardTitleText]}>Name - {item.name}</Text>
                  </View>
                </View>
                <View style={{flexDirection: 'row',flex:1, marginTop: 5,marginBottom: 1}}>
                  <Picker
                    key={index}
                    mode="dropdown"
                    iosHeader="Select your Title"
                    iosIcon={ 
                      <Icon 
                        name ="arrow-drop-down-circle"
                        style = {{ color: "#007aff", fontSize: 25 }} />
                    }
                    style={{ width: undefined }}
                    selectedValue={"Miss"}
                    // onValueChange={(itemValue, itemIndex) => this.onClickDropdown(itemValue, itemIndex, item)}>
                    onValueChange={this.onValueChange.bind(this,index)}>

                    <Picker.Item label="Select Title" value="" />
                    <Picker.Item label="Mr" value="Mr" />
                    <Picker.Item label="Mrs" value="Mrs" />
                    <Picker.Item label="Miss" value="Miss" />
                  </Picker>
                </View>
                <Item 
                  floatingLabel 
                  style={styles.InputBoxStyle}>
                  <Label>First Name</Label>
                  <Input />
                </Item>
                <Item 
                  floatingLabel 
                  style={styles.InputBoxStyle}>
                  <Label>Last Name</Label>
                  <Input/>
                </Item>
              </View>
            </CardItem> 
          </View>
        </Card>
    </View>
    );
  };

  render() {
    return (
      <FlatList
        data={data}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => item.name}
      />
    );
  }
}

Редактировать 1: я использовал это (this.state.titleArray [index]) в месте selectedValue = {"Miss"}, но не работает

Answer 1

Передайте атрибут extraData и назначьте свое состояние в FlatList.И в Picker назначьте свое состояние selectedValue.Пожалуйста, проверьте код ниже.

 const data = [
          {name: 'one'},
          {name: 'two'},
        ];
       let pickers = [];
       const newTitles = [];
       const Titles_array = [];
       export default class BusBookingPage extends Component {

       constructor(props) {
       super(props);
        this.state = {
        titleArray:[],
      };

      }

      componentDidMount(){
       newTitles = this.state.titleArray.slice() //copy the array
       var newState = this.state.shareholders.slice()
       var newgender = this.state.genderArray.slice()
       for (var i = 0; i < data.length; i++) {
       newTitles[i]='Mr';
       newgender.splice(i, 1, false);
       pickers.splice(i, 1, 'Mr');
       newState[i]= {titles:'Select Title'};
       Titles_array[i]= '';
      }
      this.setState({titleArray: newTitles}) //set the new state
     }

     handlePickerSelection(value,index){
      let markers = [ ...this.state.titleArray ];
      for (var j = 0; j < markers.length; j++) {
      if(j===index){
       markers[index] = value;
       }else{
      markers[j] = markers[j];
     }
    }
    this.setState({titleArray: markers });
   }


   renderItem = ({ item, index }) => {
   const itemsArray = this.state.titleArray;
   var title;
   if(index==0){
    title = "Primary Passenger";
   }else{
    title = "Co-Passenger " + index;
   }
   return (
    <View>
        <Card style={styles.ContainerCardStyle}>
            <View style={styles.CardContainer}>
              <CardItem>
                <View style={{flex:1}}>
                  <View style={{flexDirection: 'row',flex:1}}>
                    <Text style={styles.CardTitleText}>{title}</Text>
                    <View style={{backgroundColor: '#f2f2f2'}}>
                      <Text style={[styles.CardTitleText]}>Seat - {item.Seat}</Text>
                    </View>

                  </View>

                   <View style={{flexDirection: 'row',flex:1,marginTop: 5,marginBottom: 1}}>
                       <Picker
                        key={index}
                        iosHeader="Select your Title"
                        iosIcon={<Icon name="arrow-drop-down-circle" style={{ color: "#007aff", fontSize: 25 }} />}
                        style={{ width: undefined }}
                        selectedValue={this.state.titleArray[index]}
                        onValueChange={(v:string) => this.handlePickerSelection(v,index)}>


                        <Picker.Item label="Select Title" value="s" />
                        <Picker.Item label="Mr" value="Mr" />
                        <Picker.Item label="Mrs" value="Mrs" />
                        <Picker.Item label="Miss" value="Miss" />
                      </Picker>
                    </View>

                  <Item 
                    floatingLabel 
                    style={styles.InputBoxStyle}
                    >
                    <Label>First Name</Label>
                    <Input
                      ref={"Fname"+index}
                      onChangeText={(text)=> this.onChanged(text,"Fname"+index)} />
                  </Item>
                 <Item 
                    floatingLabel 
                    style={styles.InputBoxStyle}>
                    <Label>Last Name</Label>
                    <Input 
                      ref={"Lname"+index}
                      onChangeText={(text)=> this.onChanged(text,"Lname"+index)}

                      />
                  </Item>
                </View>
              </CardItem> 
              <CardItem> 


              </CardItem> 
            </View>
        </Card>
    </View>
  );
  };
  render() {
  return (
  <Container style={{backgroundColor: '#EEEEEE',}}>
      <Content>
      <FlatList
        extraData={this.state.titleArray}
        data={data}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => item.Seat}
      />

      </Content>
  </Container>
 );
}
}