使用 localStorage 为每个输入持久化状态更改

Question

所以我有两张单选按钮图片，一张选中，一张未选中。我试图坚持状态的变化，以便在单击每个输入的按钮时查看相应的图像。请帮忙。这是我的代码：

import React, { useState, useEffect } from 'react';

const Option = (props) => {
const img1 = <img alt='' src='/radio-active.png' className='radio__img' />;
const img2 = <img alt='' src='/radio-inactive.png' className='radio__img' />;
const [state, setState] = useState(false);

const handleStateChange = () => {
    state === true ? setState(false) : setState(true);
};

useEffect(() => {
    setState(JSON.parse(window.localStorage.getItem('state')));
}, []);
useEffect(() => {
    window.localStorage.setItem('state', state);
}, [state]);

return (
    <div className='option'>
        <div className='radio'>
            <button className='radio__button' onClick={handleStateChange}>
               {state ? img1 : img2}
            </button>

            <p className='option__text radio__text'>{props.optionText}</p>
        </div>
        <button
            className='button button--link'
            onClick={(e) => {
                props.handleDeleteOption(props.optionText);
            }}
        >
            remove
        </button>
    </div>
);
};

export default Option;

Answer 1

您的所有 Option 组件都使用相同的键（“状态”）保存状态。您会希望每个选项都有自己的保存状态。对于每个选项，添加一个新的“optionName”属性，这是将选项的值保存到本地存储时要使用的键。

// Change these:
window.localStorage.setItem('state', state);
setState(JSON.parse(window.localStorage.getItem('state')));

// To these:
window.localStorage.setItem(props.optionName, state);
setState(JSON.parse(window.localStorage.getItem(props.optionName)));

使用 localStorage 为每个输入持久化状态更改

Persisting state change with localStorage for each input

setstate

reactjs