有关带有 typescript 和 tailwind 的 next.js 应用程序中单选组中默认检查输入的错误

Question

我使用 next.js 构建了一个网页，该网页接受用户的输入（用户从 3 个菜单中进行选择），然后显示包含所请求信息的 Chartjs 条形图。所有 3 个菜单均分配有默认值。

我有一个错误，其中一个菜单的选中标签无法正确显示。 （当我刷新页面时，会看到它被短暂选中，然后又取消选中）。这是菜单组件。任何错误消除帮助表示赞赏！

'use client'

interface SocialValueGroupProps {
    selectedSocialValue : string,
    handleSelectValue : (value: string) => void
}

const SocialValueGroup = ( props: SocialValueGroupProps) => {

    const socialValues: { id: string, name: string }[] = [
        { id: "work_score", name: "Importance of work" }, 
        { id: "fam_score", name: "Importance of family" },
        { id: "religion_score", name: "Importance of religion"},
        { id: "gender_equality", name: "Importance of gender equality"},
        { id: "ethnic_rel_tolerance", name: "Ethnic and religious tolerance"},
        { id: "sex_minority_tolerance", name: "Tolerance of sexual minorities"}]


    function handleChange(event: React.ChangeEvent) {

        props.handleSelectValue(event.target.id)
        
    }

    return (

        <div className="w-full">
            <fieldset>
                <div className='grid-cols-1 px-5 mt-5'>
                <h2 className='text-black text-2xl'>Select a social value</h2>
                    {socialValues.map((socialValue: { id: string, name: string }) => (
                        <div key={socialValue.id} className='px-5 my-2'>
                            <input
                                type="radio"
                                id={socialValue.id}
                                value={socialValue.name}
                                name="social_value"
                                className="hidden peer"
                                onChange={handleChange}
                                defaultChecked={props.selectedSocialValue == socialValue.id}
                            />
                            <label
                                htmlFor={socialValue.id}
                                className="block w-full px-4 py-2 rounded-full bg-gray-300 text-gray-800 cursor-pointer hover:bg-gray-400 transition-colors
                         peer-checked:bg-indigo-300"
                            >
                                {socialValue.name}
                            </label>
                        </div>

                    ))}
                </div>
            </fieldset>
        </div>
    )
}

export default SocialValueGroup

Answer 1

你可以更换道具

defaultChecked 

=>

checked

 <input
  type="radio"
  id={socialValue.id}
  value={socialValue.name}
  name="social_value"
  className="hidden peer"
  onChange={handleChange}
  checked={props.selectedSocialValue == socialValue.id}
/>

参考：https://tailwindcss.com/docs/hover-focus-and-other-states# Differentiating-peers