Question

仅启用用户希望启用的一个开关（切换），您会怎么做？

这是我的状态：

state = {
  menuItems: [
    { title: 'Test1', switchValue: false },
    { title: 'Test2', switchValue: false }
]};

这是我的构造函数：

constructor(props: any) {
super(props);
this.toggle = this.toggle.bind(this);

}

这是功能控制开关：

toggle(item: any) {
  const menu = [...this.state.menuItems];
  menu[item].switchValue = !menu[item].switchValue;

  this.setState({ menu });
}

这是这样的地图：

public render() {
return (
  <View style={styles.container}>
    {this.state.menuItems.map((item, index) => (
      <TouchableOpacity onPress={this.showSettingHint} key={item.title}>
        <View style={[styles.rowContainer, index === 0 ? styles.topRowContainer : null]}>
          <Text style={styles.title}>{item.title}</Text>
          <Switch
            onValueChange={this.toggle}
            value={item.switchValue}
          />
        </View>
      </TouchableOpacity>
    ))}
  </View>
);}

但是我遇到了这样的错误：

未定义不是对象（评估'menu [item] .switchValue'）

Answer 1

切换功能可能期望菜单项的索引作为参数。

toggle(item: any) {
  const menu = [...this.state.menuItems];
  menu[item].switchValue = !menu[item].switchValue;

  this.setState({ menu });
}

并且在您的Switch中，您没有传递菜单项的索引，那么，我认为如果在onValueChange中传递索引是可行的，

      <Switch
        //Add index here
        onValueChange={this.toggle(index)}
        value={item.switchValue}
      />

从数组react-native生成时，多个开关可一次启用所有功能

1 个答案: