动态复选框未按预期运行

Question

我是运行 React Native 应用程序。
我希望我的复选框是动态的。下面的代码使复选框动态化，但我无法获得我想要的格式。

App.js

constructor(props) {
    super(props)
    this.state = {
      data: [
        { id: 1, key: 'Read', type: 'HeartRate',  checked: false },
        { id: 2, key: 'Write', type: 'HeartRate',  checked: false },
        { id: 3, key: 'Read', type: 'BodyMassIndex',  checked: false },
        { id: 4, key: 'Write', type: 'BodyMassIndex',  checked: false }
            ]
        }
   }


onCheckChanged = (id) => {
    const data = this.state.data;

    const index = data.findIndex(x => x.id === id);
    data[index].checked = !data[index].checked;
    this.setState(data);
}


render() {
    return (
              {
                this.state.data.map((item,key) => 
                <View  style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>
                <Text style={styles.modalText}> {item.type} </Text>
               <CheckBox title={item.key} key={key}  checked={item.checked} onPress={()=>this.onCheckChanged(item.id)}/>
               </View>
               )
            }
    )
}

以上代码的输出为：

但我希望它采用这种格式。 “HearRate”、“Read”和“Write”都在 1 行中。
我怎样才能做到这一点？任何帮助都会很棒！

Answer 1

试试这个方法

onCheckChanged = (item, key) => {                 
    const newData = {...this.state.data}; // Deep cloning data
    newData[index].checked = !newData[index].checked; // Mutate the value
    this.setState(newData); // Reset state to reflect on screen
}


render() {
    return (
            {
                this.state.data.map((item,key) => 
                // Remove warning by adding `key` prop here
                <View key={`${key}`}  ...>
                  ...
                 <CheckBox ... 
                     checked={item.checked} 
                     onPress={()=>this.onCheckChanged(item, key)}
                 />
               </View>
               )
           }
    )
}

Answer 2

我认为您需要在呈现复选框数据之前对其进行格式化。您可以像下面这样格式化它

const formattedData = [
  {
    id: 1,
    type: 'HeartRate',
    options: [
      { key: 'Read', checked: false },
      { key: 'Write', checked: false },
    ],
  },
  {
    id: 2,
    type: 'BodyMassIndex',
    options: [
      { key: 'Read', checked: false },
      { key: 'Write', checked: false },
    ],
  },
];

如果你想实现你提到的上述输出，你可以像这样渲染所有项目 -

{formattedData.map((item, index) => {
        return (
          <View>
            <View style={{ flexDirection: 'row',  marginBottom: 20 }}>
              <Text>{item.type}</Text>
              {item.options.map((val) => {
                return (
                  <View style={{ flexDirection: 'row', marginLeft: 10, }}>
                    // this should be your checkbox
                    <View style={styles.checkbox} />
                    <Text style={{ marginLeft: 10 }}>{val.key}</Text>
                  </View>
                );
              })}
            </View>
          </View>
        );
      })}

你会得到这样的输出，

最后，here提供一个工作demo，供大家参考。

动态复选框未按预期运行

Dynamic checkbox not functioning as expected

javascript

checkbox

reactjs

react-native