Установите флажок «все таблицы» при нажатии кнопки «другая таблица» с помощью команды «Реакция».

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;
  }

а затем передать все реквизиты дочернему элементу.Теперь проблема, с которой я сталкиваюсь сейчас, заключается в методе handleTableCheckboxChange, где я не понимаю, как вы использовали фильтр для получения непроверенного элемента.а затем отметьте галочкой все изменения.

Answer 1

Вот пример кода. Очевидно, я не охватил все случаи неудачи. Тем не менее, вы получите представление о том, как это можно сделать.

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 2

Я плохо понял ваш код, поэтому я понял из того, что вы написали. И тогда я создал рабочий пример для вас. Надеюсь, это поможет вам!

ОБНОВЛЕННЫЙ КОД

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 3

Попробуйте этот подход.Вы можете выбрать как отдельного человека, так и поставить галочку напротив всех.

    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
          });
        }
    }

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

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

В этом случае значение isCheckd в состоянии соответствует одному флажку. Чтобы установить все остальные флажки в другой таблице, необходимо обновить значения, установленные в setState, до всех значений, соответствующих всем флажкам, которые вы хотите отметить.

Так что, если у вас есть еще 3 флажка, значения которых соответствуют состоянию isCheckd1, isCheckd2, and isCheckd3, тогда ваш обработчик будет:

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