React使用label标签for属性报错

最新推荐文章于 2024-11-05 13:03:50 发布

幸福了，然后呢

最新推荐文章于 2024-11-05 13:03:50 发布

阅读量2.5k

点赞数 2

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_42260975/article/details/106195277

版权

React 专栏收录该内容

27 篇文章

订阅专栏

在React应用中，使用label标签的`for`属性时遇到错误。需求是点击标题使input文本框获得焦点。错误信息未详细给出，解决方案是将`for`属性改为`htmlFor`来关联input元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React使用label标签for属性报错

需求描述：点击标题文字直接激活input文本框，输入文字
在这里插入图片描述
代码实现：

render() {
        return (
            <div>
                <div>
                    {/* 想点击“点击加入姓名吧”直接可以激活文本框 
                       1. 给input添加id名
                       2. label添加for属性
                    */}
                    <label for="inputName">点击加入姓名吧</label><br/><br/>
                    <input id="inputName" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
            </div>
        );
    }

报错：
在这里插入图片描述
解决办法：在react中要使用htmlFor

render() {
        return (
            <div>
                <div>
                    {/* 想点击“点击加入姓名吧”直接可以激活文本框 
                       1. 给input添加id名
                       2. 修改label的for属性，使用htmlFor
                    */}
                    <label htmlFor="inputName">点击加入姓名吧</label><br/><br/>
                    <input id="inputName" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
                    <button onClick={this.addList.bind(this)}> 增加姓名 </button>
                </div>
            </div>
        );
    }