reactjs - 什么可能导致 html 选择元素不在浏览器上呈现?
问题描述
我的反应项目中有一个表单,其中包含很少的输入标签和选择标签。在浏览器上,输入正在呈现,但选择标签没有呈现。我正在使用物化 css 进行样式设置。我检查了元素,选择元素显示在元素检查窗格中,并且没有关于它的控制台错误。可能是什么问题和可能的解决方案?代码如下所示,并带有屏幕截图。
import React, { useState, useEffect, useRef } from 'react';
import { useDispatch } from 'react-redux';
import M from 'materialize-css/dist/js/materialize'
function Register() {
const initialState = {
pin: '',
serial_num: '',
last_name: '',
first_name: '',
date: '',
gender: 'male',
school: '',
class: '',
photo: ''
}
const photoRef = useRef();
const dispatch = useDispatch();
useEffect(() => {
const elems = document.querySelectorAll('.datepicker');
M.Datepicker.init(elems, {
autoClose: true
});
}, []);
const [regState, setRegState] = useState(initialState)
const onChange = e => {
setRegState({ ...regState, [e.target.name]: e.target.value });
}
const onSubmit = e => {
// dispatch();
setRegState({...regState,
photo: photoRef.current.files[0].name
})
console.log(regState)
console.log(photoRef.current.files[0].name);
setRegState({ ...initialState });
e.preventDefault();
}
return (
<div className="row">
<form method='POST'
onSubmit={onSubmit}
className="col s12"
encType="multipart/form-data"
>
<div className="input-field col s12">
<input id="serial_num" type="text"
className="validate" name="serial_num"
min="13" max="17" onChange={onChange} required
value={regState.serial_num}
/>
<label htmlFor="serial_num">Serial Number</label>
</div>
<div className="input-field col s12">
<input id="pin" type="password"
className="validate" name="pin"
min="10" max="15" onChange={onChange} required
value={regState.pin}
/>
<label htmlFor="pin">Pin</label>
</div>
<div className="input-field col s12">
<input id="last_name" type="text"
className="validate" name="last_name"
onChange={onChange} required
value={regState.last_name}
/>
<label htmlFor="last_name">Last Name</label>
</div>
<div className="input-field col s12">
<input id="first_name" type="text"
className="validate" name="first_name"
onChange={onChange} required
value={regState.first_name}
/>
<label htmlFor="first_name">First Name</label>
</div>
<div className="input-field col s12">
<input id="date" type="text"
className="validate datepicker" name="date"
onChange={onChange} required
value={regState.date}
/>
<label htmlFor="date">Date of Birth</label>
</div>
<div className="input-field col s12">
<label>
<input name="gender" type="radio" checked value='male' onChange={onChange} />
<span>Male</span>
</label>
</div>
<div className="input-field col s12">
<label>
<input name="gender" type="radio" value='female' onChange={onChange} />
<span>Female</span>
</label>
</div>
<div className="input-field col s12">
<select name='school' id="school" value={regState.school} onChange={onChange} >
<option value="" >Select School</option>
<option value="nursery" >Nursery School</option>
<option value="primary" >Primary School</option>
<option value="secondary" >Secondary School</option>
</select>
<label htmlFor="school">Select School</label>
</div>
<div className="input-field col s12">
<select name='class' id="class" value={regState.class} onChange={onChange} >
<option value="" >Select Class</option>
</select>
<label htmlFor="class">Select Class</label>
</div>
<div className="input-field col s12">
<input id="photo" type="file"
className="validate" name="photo"
ref={photoRef}
/>
<label htmlFor="photo">Photo</label>
</div>
<button className="btn waves-effect waves-light" type="submit" name="action">Submit
<i className="material-icons right">send</i>
</button>
</form>
</div>
)
}
解决方案
Select需要被初始化 - 在它被添加到 DOM 之后,并且每次渲染它:
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
仅供参考,Materialize 隐藏了本机选择(显示:无),并且仅在初始化运行时生成新的选择(实际上是由文本输入触发的下拉菜单)。您还可以.browser-default
在选择上使用并绕过初始化和具体化样式。
推荐阅读
- react-native - React Native 设置动画值
- hadoop - 如何移动hdfs中的最后n个文件
- php - 子域上的 Laravel 存储链接
- css - 我怎样才能使这个文本居中并删除它的默认高度
- javascript - 在 Angular 电子应用程序中读取大型 zip 文件
- azure-ad-b2c - 是否可以在 IdentityModel.OidcClient 中获取 code_verifier?
- reactjs - React 和 SAPUI5 的具体配置:如何解决 CopyPlugin 的验证错误?
- java - 在 Spring Boot 中使用安全的 Soap Web 服务
- javascript - antd中如何获取Input.Password项的值
- kubernetes - GCP-LB 不均匀地将流量分配到 HAProxy Ingress Controller Pod