Подключение сборщиков в React-Native - PullRequest
Новая
       25

Подключение сборщиков в React-Native

0 голосов
/ 01 февраля 2019

Можно ли соединить два сборщика, чтобы при наличии имени в первом имени и другого имени во втором они автоматически назначались?

Например: у пользователя есть first_name и last_name.Когда пользователь нажимает на первый сборщик и выбирает first_name, автоматически изменяет значение во втором сборщике last_name.

1 Ответ

0 голосов
/ 01 февраля 2019

Определенно, да, это возможно.Но учтите, что двум именам нужно что-то, что связано друг с другом.Я приведу пример, где state обрабатывает массив names и pickedName, то есть значение, которое будут отображать оба сборщика.Два средства выбора просто отображают разные метки с одинаковыми значениями. 

state={
    pickedName: {
      firstName: '',
      lastName: ''
    },
    names: [
      {
        firstName: 'Pinco',
        lastName: 'Pallino'
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi'
      }
    ]
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

Обновление: Предположим, вы выбираете имена из БД во время монтажа экрана.Вы можете сделать это следующим образом: 

  state = {
    pickedName: {
      firstName: '',
      lastName: '',
    },
    names: [],
  };

  componentDidMount() {
    this.getNamesFromDB();
  }

  getNamesFromDB = () => {
    // Here you can call DB to get names list.
    // So the following const wouldn't be hardcoded as I did
    const nameList = [
      {
        firstName: 'Pinco',
        lastName: 'Pallino',
      },
      {
        firstName: 'Mario',
        lastName: 'Rossi',
      },
    ];

    // set the component state with the list you've received
    // (by default pickers show the first element of the list, so you don't need to specify pickedName,
    // but if you want to select another element you can do it this way)
    this.setState({
      names: nameList,
      // pickedName: nameList[1] // <-- to select the second element by default
    });
  }

  render() {
    const { pickedName } = this.state;
    return (
      <View style={styles.container}>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.firstName} value={name} />
          ))}
        </Picker>
        <Picker
          selectedValue={pickedName}
          style={{ height: 50, width: 200 }}
          mode={'dropdown'}
          onValueChange={(itemValue, itemIndex) =>
            this.setState({ pickedName: itemValue })
          }>
          {this.state.names.map(name => (
            <Picker.Item label={name.lastName} value={name} />
          ))}
        </Picker>
      </View>
    );
  }

Я также создал перекус , если вы хотите взглянуть.Надеюсь, я был достаточно ясен, я здесь для всех разъяснений или предложений.

...