대응 중인 확인란 목록을 확인/확인 해제하는 방법

대응 중인 확인란 목록을 확인/확인 해제하는 방법

나는 a를 가지고 있다.room페이지와 그 페이지에는 그 방에 부착된 센서 목록이 있는데, 그 센서들은 다음과 같은 확인란을 사용하여 선택할 수 있다.

<div className="checkboxRowContent">
  {sensors.map(s => {
    return (
      <div className="checkboxElementWrapper" key={s.id}>
        <label htmlFor={`sensor${s.id}`}>
          <div className="checkboxLabel">
            <Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
          </div>
          <input
            type="checkbox"
            id={`sensor${s.id}`}
            name="sensorId"
            value={s.id}
            checked={s.roomId === values.id}
            onChange={handleCheckbox}
          />
          <span className="checkbox" />
        </label>
      </div>
    );
  })}
</div>

문제는 - 이 접근방식은 내가 체크박스를 선택 해제하는 것을 금지한다는 것이다. (그래서 만약 그 센서가 그 방에 연결되어 있다면, 바로 그것이다.)이 확인란을 선택/취소할 수 있도록 이 확인란을 어떻게 다시 작성할 수 있는가?

수업 시간에 그걸 명시해야 해

견본은 어느 정도 이와 같을 것이다.

export default class yourComponent extends React.Component {

  state = {
    checkedBoxes: []
  }

  handleCheckbox = (e, s) => {
    const checkedBoxes = [...this.state.checkedBoxes];
    if(e.target.checked) {
      checkedBoxes.push(s)
    } else {
      const index = checkedBoxes.findIndex((ch) => ch.roomId === s.roomId);
      checkedBoxes.splice(index, 1);
    }
    this.setState({checkedBoxes});
  }


  render() {

    return(
      <div className="checkboxRowContent">
      {sensors.map(s => {
          return (
            <div className="checkboxElementWrapper" key={s.id}>
              <label htmlFor={`sensor${s.id}`}>
                <div className="checkboxLabel">
                  <Link to={`/sensors/edit/${s.id}`}>{s.name}</Link>
                </div>
                <input
                  type="checkbox"
                  id={`sensor${s.id}`}
                  name="sensorId"
                  checked={checkedBoxes.find((ch) => ch.roomId === s.roomId)}
                  onChange={(e) => handleCheckbox(e, s)}
                />
                <span className="checkbox" />
              </label>
            </div>
          );
        })}
      </div>
    )
  }
}

주(州,checkedBoxes선택한 모든 확인란 가져오기.

A 핸들러handleCheckbox확인란 클릭 처리,

당신은 가지고 있다handleCheckBox제어된 구성 요소.이벤트 핸들러에서 무엇을 하는지 알 수 없지만, 이벤트 핸들러가 제어되면 센서 어레이(상태/프로포즈일 경우)를 변경하여 확인할 수 있다.s.roomId === values.id사실일 것이다.

통제를 원하지 않는다면, 아마도defaultChecked다른 방식으로 작업할 수 있게 해줄 겁니다

https://reactjs.org/docs/forms.html#controlled-components을 참조하십시오.

import React, {Component} from 'react';
import axios from 'axios';

const Books = props=>(

<div className='form-group'>
    <label>{props.book}
        <input type='checkbox' name={props.name}  className='form-check' onChange={props.onChange} />
    </label>
</div>
)

class Total extends Component{

constructor(props){
    super(props);

    this.onChangeCheck = this.onChangeCheck.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state={
        checkBoxes: [],
        books:[]

    }
}

componentDidMount() {
    axios.get('http://localhost:3000/api/book/').then(resolve=>{
        console.log(resolve.data.data);
        this.setState({
            books:resolve.data.data
        }).catch(err=>{
            console.log(err)
        })
    })
}

onChangeCheck(e){
    console.log(e.target.name)

    if(e.target.checked){
        const array =  this.state.checkBoxes;
        array.push(e.target.name)
        this.setState({
            checkBoxes:array
        })
    }else{
        const array =  this.state.checkBoxes;
        const index = array.indexOf(e.target.name);
        console.log(index)
        array.splice(index,1);
        console.log(array);
        this.setState({
            checkBoxes:array
        })
    }
}

onSubmit(e){
    e.preventDefault();

    axios.put("http://localhost:8080/books/getTotal/",this.state.checkBoxes).then(resolve=>{
        console.log(resolve)
        alert(`Total price of books ${resolve.data}`);

    }).catch(err=>{
        console.log(err);
    })

}


render(){
    return(
        <div className='card'>
            <div className='card-header'>
            </div>
            <div className='card-body'>
                <form className='form' onSubmit={this.onSubmit}>

                    <div className='form-group'>
                        {
                            this.state.books.map(object=>(
                                    <Books name={object._id} book={object.name}  onChange={this.onChangeCheck} />
                                )
                            )
                        }
                    </div>
                    <div className='form-group'>
                        <button type='submit'  className='btn btn-success'>Get Total</button>
                    </div>
                </form>
            </div>
        </div>
    )
}
}

export default Total;

참조URL: https://stackoverflow.com/questions/48520775/how-to-check-uncheck-a-list-of-checkboxes-in-react