如何在React组件的input标签checked属性中访问自身name属性？

可行的实现方式 #

方法1：提取name为变量（最简洁） #

把input的name值提取成一个独立变量，同时用于name属性和checked的判断逻辑，避免重复硬编码：

export default function MyComponent(props) {
    const [searchParams, setSearchParams] = useSearchParams();
    const filterName = "filterCupcakes";
    return (
        <input 
            className="css-checkbox" 
            type="checkbox" 
            id="cupcakes" 
            name={filterName} 
            checked={searchParams.has(filterName)}
        />
    );
}

这种方式维护性高，后续修改name只需要改动一处，完全满足需求，也符合React的开发习惯。

方法2：封装自定义复选框组件（适合多场景复用） #

如果有多个类似的过滤复选框，可以把逻辑封装成自定义组件，外部只需要传入一次name，内部自动复用：

// 自定义组件
function FilterCheckbox({ name, id, className }) {
    const [searchParams, setSearchParams] = useSearchParams();
    return (
        <input 
            className={className}
            type="checkbox"
            id={id}
            name={name}
            checked={searchParams.has(name)}
        />
    );
}

// 父组件中使用
export default function MyComponent(props) {
    return (
        <FilterCheckbox 
            className="css-checkbox"
            id="cupcakes"
            name="filterCupcakes"
        />
    );
}

这种方式适合批量创建同类复选框，大幅减少重复代码。

为什么不能直接写input.name？ #

在React的JSX渲染阶段，当前的input还没有被渲染成真实DOM节点，JSX中的表达式是在组件的渲染上下文（而非DOM元素上下文）中执行的，所以无法直接引用当前元素的属性，因此checked={searchParams.has(input.name)}这种写法本身不可行。

问题标题建议 #

可以参考以下更精准的标题：

• React：如何在input的checked属性中复用自身的name值？
• 如何避免在React input组件中重复硬编码name字符串？
• React中能否直接引用当前JSX元素的属性？

内容的提问来源于stack exchange，提问作者Fullaccess