React implements all select and reverse select

Requirement Scenario Description: One input A, one input B Now what we're going to do is when we operate on A single input A, in addition to being able to check and uncheck itself, we're going to associate all checked and unchecked items of input B, We also want to associate A single Input A to implement our programCopy the code

App.js introduces modules

This route has not been imported or modify the current pageimport Input2 from './views/Input2';

<Input2/>
Copy the code

Create page Input2

Vi SRC/views/Input2 / index. The JSX first step the HTML structure to achieve the < React. The fragments ><h3>select all</h3>
    <label>
        <input type="checkbox"
        />select all</label>
    <ul>
        <li>
            <label>
                <input type="checkbox"
                />Content of a</label>
         </li>
         <li>
            <label>
                <input type="checkbox"
                />Content of the two</label>
         </li>
         <li>
            <label>
                <input type="checkbox"
                />Content of the three</label>
         </li>
         
    </ul></ react. Fragment> </ react. Fragment> ok, so recall that we need to define the data structure firstthis.state = {
    bTrue: {allSel:false,},mvc:[
        {lang:'angular'.checked:false},
        {lang:'vue'.checked:false},
        {lang:'ember'.checked:false},
        {lang:'react'.checked:false},
        {lang:'omi'.checked:false},]} the data structure is defined, so let's loop through the ul content <ul>{this.listFn(mvc)}</ul>

 listFn(data){
    return data.map((item,index) = >(
        <li key={index}>
            <label>
                <input type="checkbox"
                />
                {item.lang}
            </label>
        </li>We add the event and checked to the single inputlet {bTrue,mvc} = this.state;

<input type="checkbox"
    name='allSel'
    checked={bTrue.allSel}
    onChange={(e)= >{this.allSelFn(e)}}
    /><li key={index}> <li key={index}><label>
        <input type="checkbox"
        name='allSel'
        checked={item.checked}
        onChange={(e)= >{this._allSelFn(e,index)}}
        />
        {item.lang}
    </label></li> In order to distinguish which event is operating on, we pass the subscript. Ok so let's start writing the function/ / a single input
allSelFn(e){
    // Select name from target and checked
     let { name , checked } = e.target;
     // Unpack the state
     let {bTrue,mvc} = this.state;
     // The first step is to enable the current check uncheck
     //bTrue.allSel = checked;
     // Consider the allSel extensibility upgrade to name is the field value we defined
     bTrue[name] = checked;
     this.setState({bTrue}).setState({bTrue}).setState({bTrue}/ / a single input
allSelFn(e){
    // Select name from target and checked
     let { name , checked } = e.target;
     // Unpack the state
     let {bTrue,mvc} = this.state;
     // The first step is to enable the current check uncheck
     //bTrue.allSel = checked;
     // Consider the allSel extensibility upgrade to name is the field value we defined
    /* bTrue[name] = checked; If single is selected, right? ForEach = map = map = map = map = map = map
      mvc.forEach((item, i) = > {
            if(checked){
                item.checked = true;
            }else {
                item.checked = false; }});// Both values are setState
     this.setState({bTrue, MVC})} This, a single input can have full control over multiple inputs to select all or noneCopy the code

/ / multiple input
_allSelFn(e,index){
    // Break it up one by one
        let { name , checked } = e.target;
        let {bTrue,mvc} = this.state; Press the same implementation above itself to switch//mvc[0].checked = checked;
        //mvc[1].checked = checked;
        mvc[index].checked = checked;
       
        this.setState({MVC}) so that each item can be selected all and unselected} continue to associate_allSelFn(e,index){
    // Break it up one by one
        let { name , checked } = e.target;
        let {bTrue,mvc} = this.state; Press the same implementation above itself to switch//mvc[0].checked = checked;
        //mvc[1].checked = checked;
        mvc[index].checked = checked;
       BTrue [name] = true; Or bTrue [name] = false; (true/false) (true/false) (true/false) (true/false) (true/false) (true/false) (true/false) (true/false
        let bT = mvc.every((item,index) = >{
            return item.checked;
        })
        bTrue[name] = bT;
        / / the same setState
        this.setState({bTrue, MVC}) so that each item can be selected all and unselected}Copy the code

The complete code

src/views/Input2/index.jsx

import React, { Component } from 'react';

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            bTrue: {allSel:false,},mvc:[
                {lang:'angular'.checked:false},
                {lang:'vue'.checked:false},
                {lang:'ember'.checked:false},
                {lang:'react'.checked:false},
                {lang:'omi'.checked:false}}},]/ / a single input
    allSelFn(e){
        let { name , checked } = e.target;
        let {bTrue,mvc} = this.state;
        bTrue[name] = checked;
        mvc.forEach((item, i) = > {
            if(checked){
                item.checked = true;
            }else {
                item.checked = false; }});this.setState({bTrue,mvc})
    }
    / / multiple input
    _allSelFn(e,index){
        let { name , checked } = e.target;
        let {bTrue,mvc} = this.state;
        mvc[index].checked = checked;
        let bT = mvc.every((item,index) = >{
            return item.checked;
        })
        bTrue[name] = bT;
        this.setState({bTrue,mvc})
    }
    listFn(data){
        return data.map((item,index) = >(
            <li key={index}>
<label>
    <input type="checkbox"
    name='allSel'
    checked={item.checked}
    onChange={(e)= >{this._allSelFn(e,index)}}
    />
    {item.lang}
</label>
            </li>))}render(){
        let {bTrue,mvc} = this.state;
        return(
<React.Fragment>
    <h3>select all</h3>
    <label>
        <input type="checkbox"
        name='allSel'
        checked={bTrue.allSel}
        onChange={(e)= >{this. AllSelFn (e)}} / > selection</label>
    <ul>{this.listFn(mvc)}</ul>
</React.Fragment>)}}export default View;

Copy the code