javascript - React Native映射复选框独立检查

Question

我用数据制作了数组。然后我映射它，数组的每个值都包含到映射元素的特定部分。在这个元素内部我创建了一个复选框。但是当我创建应该独立更改每个复选框状态的函数时。现在，当我单击复选框时，它会更改每个复选框的状态(当我单击一个元素时，使每个复选框都处于选中状态)。下面我贴上我的代码。

构造函数和函数

constructor(props) {
    super(props);
    this.state = {
        checked: false
    };
    this.toggle.bind(this);
}

toggle(item) {
    console.log(item);
    this.setState({checked: !this.state.checked});
}

渲染

{today.map((item, i) => (
    <View
        key={i}
        style={{borderBottomWidth: 2,}}>
        <View style={{marginLeft: 20}}>
            <Text>{item.title}</Text>
            <View>
            {
                this.state.checked ?
                    <MaterialIcon onPress={() => this.toggle(i)}
                        id={i}
                        name="check-box" size={30}
                        color='#4AB762'/>
                :
                <MaterialIcon onPress={() => this.toggle(i)}
                    id={i}
                    name="check-box-outline-blank"
                    size={30} color='#8e8d8d'/>
            }    
            </View>
        </View>
    </View>
))}

Answer 1

解决问题的方法之一:您可以将复选框放置在具有自己状态的单独组件中。

下面是示例

class Parent extends React.Component {
  render() {
    return <div>
      <CheckBox />
      <CheckBox />
      <CheckBox />
    </div>;
  }
}

class CheckBox extends React.Component {
   constructor(props) {
    super(props);
      this.state = {
        checked: false
      };
   }
   
  toggle = () => {
    this.setState({checked: !this.state.checked});
  }
  
  render() {
    return <input type="checkbox" onChange={this.toggle} />  
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">

</div>