cari

Rumah  >  Soal Jawab  >  teks badan

Paparan dan nilai tidak boleh dikemas kini apabila suis MUI diklik.

<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>
P粉638343995P粉638343995466 hari yang lalu519

membalas semua(1)saya akan balas

  • P粉298305266

    P粉2983052662023-08-16 10:48:25

    Anda mengendalikan keadaan dan nilai yang dipilih dalam komponen ToggleSwitch. Anda mempunyai kedua-dua keadaan setempat (ditandai) dan prop (nilai) dan anda mahu menyegerakkannya.

    Untuk menyelesaikan isu ini, pastikan suis dan nilai disegerakkan dengan betul

    Anda menghantar prop nilai daripada komponen induk dan anda boleh menggunakan prop itu terus untuk menentukan keadaan suis. Anda boleh memudahkan kod komponen dengan mengalih keluar keadaan dan kesan yang tidak perlu.

    Anda boleh terus menggunakan prop nilai untuk menentukan keadaan awal suis dan menggunakan fungsi onChange untuk mengemas kini komponen induk.

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

    balas
    0
  • Batalbalas