Есть ли способ переключить выбранный элемент на renderItem SelectList в реагировать родной? - PullRequest
Новая
       47

Есть ли способ переключить выбранный элемент на renderItem SelectList в реагировать родной?

0 голосов
/ 16 июня 2019

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

Я пытался использовать другие нативные компоненты, но ни один из них не может работать как вход, где я могу передать событие и нацелить его 

state = {
    containers: dataYay,
    selectedContainers: [],
    checked: false
}

containerSelected(value, item, index) {
    console.log(item.Nbr, item.CtrId)
    this.setState({ checked: value })
}

renderItem={({ item, index, section }) => {
return (
    <Block padding={[10, 15, 20, 15]} color='#EFF8FF' margin={[0, 0, 1, 0]} row center middle key={index}>
        <Block styles={styles.ContainerAssign} flex={0.3}>
            <Switch
                style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
                value={this.state.checked} //  i would like to check just one of these 
                testID={index}
                onValueChange={(value) => this.containerSelected(value, item, index)}
            />
        </Block>

        <Block styles={styles.ContainerInfo} padding={[0, 5, 0, 0]}>
            <Text style={styles.ContainerInfoText}>
                <Text style={styles.ContainerInfoTitle}> Container ID:              </Text>  {item.CtrId}
            </Text>
            ... // code would be too long to displa
        </Block>

        <Button
            ... // code would be too long to display
        </Button>
    </Block>
)
}}

Что мне нужно, чтобы найти способ передать переключение переключателя на текущий элемент при нажатии?

1 Ответ

0 голосов
/ 16 июня 2019

Решение

Сделайте ваш элемент состоящим из компонента через класс React.Component.

Например, 

class Item extend React.Component {
  state = {
    checked: false,
  }

  render() {
    return() {
      <Block padding={[10, 15, 20, 15]} color='#EFF8FF' margin={[0, 0, 1, 0]} row center middle key={index}>
        <Block styles={styles.ContainerAssign} flex={0.3}>
            <Switch
                style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }}
                value={this.state.checked} //  i would like to check just one of these 
                testID={index}
                onValueChange={(value) => this.containerSelected(value, item, index)}
            />
        </Block>

        <Block styles={styles.ContainerInfo} padding={[0, 5, 0, 0]}>
            <Text style={styles.ContainerInfoText}>
                <Text style={styles.ContainerInfoTitle}> Container ID:              </Text>  {item.CtrId}
            </Text>
            ... // code would be too long to displa
        </Block>

        <Button
            ... // code would be too long to display
        </Button>
    </Block>
    }
  }
}

И используйте этот элемент в вашем renderItem родительского элемента. 

renderItem = {({item}) => <Item item={item}/>}

Почему?

this.state.checked был применен к компоненту renderItem. Таким образом, каждый компонент renderItem использовал одно и то же состояние, вызванное с this.state.checked. Вот почему это влияет на все предметы. И я разрешаю это использовать независимые состояния в компоненте Item.

...