<p>Saya menghadapi masalah dengan suis togol UI Bahan yang saya gunakan dalam projek semasa saya. Apabila komponen dimuatkan, jika saya log nilai dalam konsol, nilai awal adalah betul. Walau bagaimanapun, jika saya mengklik suis daripada "Ya" kepada "Tidak", suis memaparkan dengan betul menunjukkan "Tidak" dipilih dan pengelogan konsol menyala semula, tetapi nilai masih menunjukkan "Ya". Jika saya mengklik suis sekali lagi dan cuba menogolnya kembali kepada "Tidak", togol hanya memaparkan semula tanpa membalikkan, pengelogan konsol menyala semula dan nilai kini dikemas kini kepada "Tidak".Jadi pada asasnya klik pertama membalikkan suis dan klik kedua membalikkan nilai. Saya telah menggunakan suis togol yang sama sebelum ini tanpa sebarang masalah, jadi bolehkah sesiapa memberitahu saya perkara yang perlu saya betulkan untuk membolehkan suis dan nilai bertukar apabila diklik? </p> <p><strong>Mengendalikan perubahan input:</strong></p> <pre class="brush:php;toolbar:false;">const handleInputChange = e => const { nama, nilai } = e.sasaran; setValues({ ... nilai, [nama]: ( jenis nilai === 'rentetan' ? (value).replace(/ +(?= )/g, '').trimStart() : value ) // Jika nilai ialah rentetan, alih keluar ruang utama dan berbilang ruang }); };</pre> <p><strong>Tukar dipanggil daripada borang: </strong></p> <pre class="brush:php;toolbar:false;"><ToggleSwitch onChange={handleInputChange} label1='Tidak' label2='Ya' name='useForCalcs' value={values.useForCalcs} /></pra> <p><strong>ToggleSwitch komponen:</strong></p> <pre class="brush:php;toolbar:false;">import * sebagai React daripada 'react'; import {Box, Switch, Typography} daripada '@material-ui/core'; eksport fungsi lalai ToggleSwitch(props) { const { label1, label2, nama, onChange, value} = props; const [ditandai, setChecked] = React.useState(false); const convertToEventParams = (nama, nilai) => ({ sasaran: { nama, nilai } }); const curValue = nilai === 1 benar : palsu; const handleSwitch = e => { setChecked(e.target.checked }; React.useEffect(() => { setChecked(curValue); }, [curValue]); // Berikan semula suis togol setiap kali nilai yang disemak berubah const handleChecked = e => suis pemegang(e); onChange(convertToEventParams(nama, (ditandai === false ? 1 : 0))); // Tukar nilai Betul/Salah kepada 1/0 }; kembali ( <Kotak> <Tipografi> {label1} {<Tukar nama={nama} checked={checked} value={checked} onChange={handleChecked} inputProps={{'aria-label': 'suis'}} />} {label2} </Tipografi> </Kotak> ); }</pre> <p><br /></p>

import React from 'react';
import { Box, Switch, Typography } from '@material-ui/core';

export default function ToggleSwitch(props) {
  const { label1, label2, name, onChange, value } = props;

  const handleChecked = () => {
    const newValue = value === 0 ? 1 : 0; // 切换值
    onChange({ target: { name, value: newValue } });
  };

  return (
    <Box>
      <Typography>
        {label1}
        <Switch
          name={name}
          checked={value === 1}
          onChange={handleChecked}
          inputProps={{ 'aria-label': 'switch' }}
        />
        {label2}
      </Typography>
    </Box>
  );
}