materializeCSS 标签无法与 React 一起正常工作答案

【问题标题】：materializeCSS label is not working properly with ReactmaterializeCSS 标签无法与 React 一起正常工作
【发布时间】：2020-09-02 16:24:00
【问题描述】：

签名容器内的代码如下所示

开始在文本字段中输入后标签没有移动或隐藏

 <div className="container">
            <form className="while" onSubmit={this.onSubmit}>
                <h5 className="grey-text text-darken-3"> Sign In</h5>
                <div className="input-field">
                    <label htmlFor="email">Email</label>
                    <input type="email" id="email" onChange={this.onChange} />
                </div>
                <div className="input-field">
                    <label htmlFor="password">Password</label>
                    <input type="password" id="password" onChange={this.onChange} />
                </div>
                <div className="input-field">
                    <button className="btn pink lighten-1 z-depth-0">Login</button>
                </div>
            </form>

        </div>

【问题讨论】：

标签： css reactjs label frontend materialize

【解决方案1】：

只需在您的项目中添加这个钩子！

useEffect(() => {
window.M.updateTextFields()
},[])

它每次都激活文本字段组件首次加载

您可以在标签上添加活动的类名但是这个

【讨论】：

【解决方案2】：

尝试将 class="active" 添加到标签中。它对我有用！

【讨论】：

【解决方案3】：

根据文档，确保标签出现在输入之后。

https://materializecss.com/text-inputs.html

【讨论】：