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

Question

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?

Mengendalikan perubahan input:

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

Tukar dipanggil daripada borang:

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

Answer 1

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