• "bereaksi": ">=16.14.0",
  • "react-dom": ">=16.14.0"
  • "@material-ui/inti": "4.11.1",
  • "@material-ui/icons": "^4.9.1",
  • "@material-ui/lab": "^4.0.0-alpha.53",
  • "@material-ui/pickers": "^3.2.10",
  • "@material-ui/styles": "4.11.1",

Berikut adalah contoh dari satu Kotak Centang yang mengaktifkan selected dan menampilkan kesalahan jika tidak dicentang.

Satu Kotak Centang

const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected && 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
</CheckBoxGroup>;

Dan ini yang sama dengan lebih dari satu Kotak Centang. Saya mengerti bahwa saya perlu memperbarui fungsi handleOnChange saya di mana saya mungkin bisa menggunakan .find untuk melihat apakah ada Kotak Centang yang dicentang untuk mengembalikan true tetapi saya tidak tahu apa yang harus diteruskan ke fungsi yaitu bagaimana cara mengakses array Kotak Centang?

Lebih dari satu Kotak Centang

const [selected, setSelected] = useState(false); 
const handleOnChange = (event) => setSelected(!selected);

<CheckBoxGroup error={!selected && 'You have to choose one!'} name="color" onChange={handleOnChange} label="Chose one" row>
  <CheckBox label="1" />
  <CheckBox label="2" />
  <CheckBox label="3" />
</CheckBoxGroup>;
0
chris loughnane 25 Mei 2021, 12:47

2 jawaban

Jawaban Terbaik

Pertama, Anda harus memberikan <CheckBox> komponen name Anda prop dan onChange. Kemudian buat status awal untuk kotak centang dan teruskan saat menginisialisasi status. Dalam handler change, kami menetapkan status untuk setiap kotak centang sesuai dengan nilai name dan checked yang sesuai. Setel prop <CheckBox> checked sama dengan nilai status yang sesuai.

export default function App() {
  // create an initial value for checkboxes
  const initialStatus = {
    first: false,
    second: false,
    third: false
  }

  // initialize a state variable to keep track of status
  const [checkboxStatus, setCheckboxStatus] = useState(initialStatus);
  
  // handle change event of checkboxes
  const handleChange = (e) => {
    e.preventDefault(); // prevent default action
    setCheckboxStatus({
      ...checkboxStatus,
      [e.target.name]: e.target.checked
    })
  }
  
  return (
    <div className="App">
      <CheckBox label="1" name="first" onChange={handleChange} checked={checkboxStatus.first} />
      <CheckBox label="2" name="second" onChange={handleChange} checked={checkboxStatus.second} />
      <CheckBox label="3" name="third" onChange={handleChange} checked={checkboxStatus.third} />
    </div>
  );
}
2
axtck 25 Mei 2021, 10:29

Setelah sedikit kerja dan terima kasih kepada @axtck atas jawabannya yang membuat saya melihat masalah dari sudut yang berbeda.

import { useState } from 'react';
import { CheckBox, CheckBoxGroup } from '@globalization-partners/ui-components';

const [selected, setSelected] = useState([]); 
const handleOnChange = (event) => setSelected(event.target.checked ? [...selected, event.target.value] : selected.filter((data) => data !== event.target.value));

<CheckBoxGroup error={selected.length === 0 && 'You have to choose one!'} onChange={handleOnChange} label="Chose one" row>
  <CheckBox value='First' label='First' />
  <CheckBox value='Second' label='Second' />
  <CheckBox value='Third' label='Third' />
</CheckBoxGroup>;
1
chris loughnane 25 Mei 2021, 11:00