使用react选择另一个表格复选框时，选中表格的所有复选框

Question

表中的每个td都有一个复选框。现在，我有另一个带有一个复选框的表。选中此复选框后，我想选择第一个表的所有其他复选框。

这是代码，

<tr key={key}>
    <td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" /></td>
    <td>{item.technology}</td>
</tr>

我做了第二张桌子

handleCheckBox = () => {
    console.log("callling the handle change");
    this.setState({
      isCheckd: !this.state.isCheckd
    })
}

constructure(props) {
    this.state = { isCheckd: false }
    <td className="text-right mr-1"><input type="checkbox" checked={this.state.isCheckd} onChange={this.handleCheckBox}  /></td>
}

现在，在此点击处理程序中有效。但是，现在如何不使用jquery来选择另一个表的所有其他复选框。

有人可以帮我吗？

尝试过的解决方案-

state = { dynamicProp: {},  isCheckd: false,}

    handleCheckBox = () => {
        this.setState({
          isCheckd: !this.state.isCheckd
        }, () => {
          this.props.jobs.forEach((item) =>
            this.setState(prevState => ({
              dynamicProp: {
                ...prevState.dynamicProp,
                [item.jdName]: prevState.isCheckd
              }
            })
            ))
        });
      }

      handleTableCheckboxChange = (e) => {
        const target = e.target.name;
        const checked = e.target.checked;
        this.setState(prevState => ({
          dynamicProp: {
            ...prevState.dynamicProp,
            [target]: checked
          }
        }), () => {
          const result = this.allTrue(this.state.dynamicProp);
          this.setState({
            isCheckd: result ? false : true
          })
        })
      }



 allTrue(obj) {
    for (var o in obj)
      if (!obj[o]) return true;
    return false;
  }

，然后将所有道具传递给child元素。现在，我现在面临的问题是在handleTableCheckboxChange方法中，在该方法中，我无法获得使用过滤器来获取未经检查的元素的方式。然后全选检查将被更改。

Answer 1

我对您的代码不太了解，因此我从您编写的内容中了解了它。然后，我为您创建了一个有效的示例。希望它能对您有所帮助！

  

更新代码

const Table=(props)=>(
   <table>
   {
      props.items.map((item, i) => (
        <tr key={i}>
           <td>
             <input type="checkbox"  checked={props.parentState[item.name]}  name={item.name} onChange={props.handleChange} />
           </td>
           <td>{item.value}</td>
        </tr>
      ))
   }
   </table>
);

class App extends React.Component {
    items = [
        {
            value: 'EN',
            name: 'field1'
        },
        {
            value: 'IT',
            name: 'field2',
        }
    ];

    state = {
        checkAll: false,
    };

    render() {
        return (
            <div>
                Check All
                <input type="checkbox" onChange={this.handleCheckAll} checked={this.state.checkAll}/>
                <Table
                   handleChange={this.handleChange}
                   items={this.items}
                   parentState={this.state}
                />
            </div>
        );
    }

    handleCheckAll = () => {
        this.setState({
            checkAll: !this.state.checkAll
        }, () => {
            this.items.forEach((item) => this.setState({ [item.name]: this.state.checkAll}))
      });
    }

    handleChange = (e) => {
        this.setState({
            [e.target.name]: e.target.checked
        }, () => {
             const uncheckedItems = this.items.filter((item) => !this.state[item.name])

             this.setState({
                  checkAll: uncheckedItems.length === 0?true:false
             });
            
        });
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

这是示例代码。显然，我没有涵盖所有失败案例。不过，您仍然会知道如何做到这一点。

import React from 'react';

export default class CheckboxIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isChecked : false,
            allTDS : [
                {name:"name 1",value:false},
                {name:"name 2",value:false},
                {name:"name 3",value:false},
                {name:"name 4",value:false},
                {name:"name 5",value:false},
                {name:"name 6",value:false},
                {name:"name 7",value:false}
            ]
        }
    }

    handleCheckBox = () => {
        this.setState({isChecked: !this.state.isChecked});
        let tempTDS = this.state.allTDS;
        for (let i =0; i < tempTDS.length; i++){
            tempTDS[i].value = !this.state.isChecked;
        }
        this.setState({allTDS : tempTDS});
    };

    render(){
        let listOfTR;
        if(this.state.allTDS.length){
            listOfTR = this.state.allTDS.map((item,index)=>{
                return(
                    <tr key={item.name}>
                        <td>
                            <label htmlFor={item.name}>
                            <input id={item.name} checked={item.value} type="checkbox"
                                   onChange={()=>{
                                       let tempObj = this.state.allTDS;
                                       tempObj[index].value = !tempObj[index].value;
                                       this.setState({allTDS:tempObj});
                                   }}/>{item.name}
                            </label>
                        </td>
                    </tr>
                )
            })
        }
        return(
                <div>
                    <label htmlFor="allTDS">
                        <input type="checkbox" id="allTDS" name="all" checked={this.state.isChecked}
                               onChange={this.handleCheckBox}/> All
                    </label>

                    <table>
                        <tbody>
                        {listOfTR}
                        </tbody>
                    </table>
                </div>
        )
    }
}

Answer 3

 this.setState({
      isCheckd: !this.state.isCheckd
    })

在这种情况下，状态中的isCheckd值对应于一个复选框。要选择另一个表的所有其他复选框，必须将setState中设置的值更新为与要选中的所有框相对应的所有值。

因此，如果您还有3个复选框的值对应于状态中的isCheckd1, isCheckd2, and isCheckd3，则处理程序将为：

this.setState({
          isCheckd1: true,
          isCheckd2: true,
          isCheckd3: true
        })

Answer 4

class CheckboxTest extends React.Component {
  constructor() {
    super();
    this.state = {
      selectAll: false,
      data1: false,
      data2: false
    };
    this.selectAll = this.selectAll.bind(this);
    this.selectField = this.selectField.bind(this);
  }
  selectAll() {
    this.setState({
      data1: !this.state.selectAll,
      data2: !this.state.selectAll,
      selectAll: !this.state.selectAll
    });
  }
  selectField(event) {
    if (event.target.value === "data1")
      this.setState({ data1: !this.state.data1 });
    else this.setState({ data2: !this.state.data2 });
  }
  render() {
    return (
      <div className="App">
        <table>
          <tbody>
            <tr>
              <td align="center">
                <input
                  checked={this.state.data1}
                  onChange={this.selectField}
                  type="checkbox"
                  name="myTextEditBox1"
                  value="data1"
                />
              </td>
              <td>data 1</td>
            </tr>
            <tr>
              <td align="center">
                <input
                  checked={this.state.data2}
                  onChange={this.selectField}
                  type="checkbox"
                  name="myTextEditBox2"
                  value="data2"
                />
              </td>
              <td>data 2</td>
            </tr>
          </tbody>
        </table>
        <table>
          <tbody>
            <tr>
              <td align="center">
                <input
                  onChange={this.selectAll}
                  type="checkbox"
                  name="myTextEditBox1"
                  value="all"
                />
              </td>
              <td>Click all</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

您可以使用状态来实现此目的。保持每个复选框字段的状态，并在更改复选框时触发一种根据您的条件设置状态的方法

Answer 5

尝试这种方法。您可以同时选中个人并选中所有复选框。

    class App extends React.Component {
        items = ['EN', 'IT', 'FR', 'GR', 'RU'];
        state = {
          checkAll: false,
          items : [
           {'label': 'EN', 'checked': false},
           {'label': 'IN', 'checked': false}, 
           {'label': 'FR', 'checked': false},   
          ]
        };

        render() {
            return (
              <div>
                Check All
                <input type="checkbox" onChange={this.handleCheckAll} />
                <table>
                    {
                        this.state.items.map((item, i) => (
                            <tr key={i}>
                                <td>
                                  <input type="checkbox" checked={item.checked} />
                                </td>
                                <td>{item.label}</td>
                            </tr>
                        ))
                    }
                </table>
              </div>
            );
        }

        handleCheckAll = () => {
          let checkAll = !this.state.checkAll;
          let items = this.state.items;
          items.map((item, i) => {
            item.checked = checkAll;
          });
          this.setState({
            checkAll, 
            items
          });
        }
    }