MUI スイッチをクリックした場合、表示および値は更新されません。
<p>現在のプロジェクトで使用しているマテリアル UI トグル スイッチで問題が発生しています。コンポーネントがロードされるときに、コンソールに値を記録すると、初期値は正しいです。ただし、スイッチをクリックして「はい」から「いいえ」にすると、スイッチは正しく表示され、「いいえ」が選択されていることを示し、コンソールのログが再び開始されますが、値は「はい」のままです。スイッチをもう一度クリックして「いいえ」に戻そうとすると、トグルは反転せずに再レンダリングされ、コンソールのログが再び起動され、値が「いいえ」に更新されます。したがって、基本的には最初のクリックでスイッチが切り替わり、2 回目のクリックで値が切り替わります。以前に同じトグル スイッチを問題なく使用したことがありますが、クリックしたときにスイッチと値を反転させるには何を修正する必要があるか教えていただけますか? </p>
<p><strong>入力変更の処理:</strong></p>
<pre class="brush:php;toolbar:false;">const handleInputChange = e => {
const {名前, 値} = e.target;
setValues({
...値、
[名前]: ( typeof value === 'string' ? (value).replace(/ (?= )/g, '').trimStart() : value )
// 値が文字列の場合、先頭のスペースと複数のスペースを削除します
});
};</pre>
<p><strong>次のフォームから呼び出されるスイッチ: </strong></p>
<pre class="brush:php;toolbar:false;"><ToggleSwitch
onChange={handleInputChange}
label1='いいえ'
label2='はい'
name='useForCalcs'
値={values.useForCalcs}
/>
<p><strong>ToggleSwitch コンポーネント:</strong></p>
<pre class="brush:php;toolbar:false;">import * as React from 'react';
import {ボックス、スイッチ、タイポグラフィ} から '@material-ui/core';
デフォルト関数のエクスポート ToggleSwitch(props) {
const {ラベル1、ラベル2、名前、onChange、値} = props;
const [チェック済み、setChecked] = React.useState(false);
const ConvertToEventParams = (名前, 値) => ({ ターゲット: { 名前, 値 } });
const curValue = 値 === 1 ? true : false;
const handleSwitch = e => { setChecked(e.target.checked); };
React.useEffect(() => { setChecked(curValue); }, [curValue]); // チェックされた値が変更されるたびにトグル スイッチを再レンダリングします
const handleChecked = e => {
ハンドルスイッチ(e);
onChange(convertToEventParams(name, (checked === false ? 1 : 0))); // True/False を 1/0 の値に変換します
};
戻る （
<ボックス>
＜タイポグラフィー＞
{ラベル1}
{<スイッチ
名前={名前}
チェック済み={チェック済み}
値={チェック済み}
onChange={ハンドルチェック済み}
inputProps={{'aria-label': 'スイッチ'}}
/>}
{ラベル2}
</タイポグラフィ>
</ボックス>
);
}</pre>
<p><br /></p>
