有没有办法在 react-native 中切换 renderItem SelectList 上的选定项目？

Question

我只想在我创建的渲染项目中切换一个开关。到目前为止，当我切换时，所有按钮都会切换，我明白这是因为我将相同的状态传递给所有开关的值，但我不知道如何只针对一个

我尝试过使用其他本机组件，但 none 似乎能够像输入一样工作，我可以在其中传递事件并将其作为目标

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>
)
}}

我需要帮助的是找到一种在点击时将开关切换传递到当前项目的方法？

Answer 1

解决方案

通过 React.Component class 使您的项目成为状态组件。

例如，

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 组件中使用独立状态。

有没有办法在 react-native 中切换 renderItem SelectList 上的选定项目？

Is there a way to toggle a selected item on the renderItem SelectList in react-native?

react-native

onclick

switch-statement

toggle

selectlist

解决方案

为什么？