Question

我用数据做了数组。然后我映射这个，并且数组的每个值都包含在映射元素的特定部分。在这个元素里面我创建了一个复选框。但是当我创建应该独立改变每个复选框的状态的功能时。现在，当我单击复选框时，它会更改每个复选框的状态（当我单击一个元素时，选中每个复选框）。下面我把我的代码。

构造函数＆amp;功能

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>

React native映射Checkbox以独立检查

1 个答案: