materializeCSS标签不能与React一起正常使用

Question

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

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

 <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>

Answer 1

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

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

Answer 2

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

Answer 3

只需在您的项目中添加此钩子即可！

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

每次激活文本字段时 组件第一次加载

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