reactjs - 什么会导致 html select 元素无法在浏览器上呈现？

Question

我的 react 项目中有一个表单，输入标签很少并选择标签。在浏览器上，输入正在呈现但选择标签没有呈现。我正在使用 materialize css为造型。我检查元素，显示选择元素在元素检查 Pane 上，没有关于它的控制台错误。可能是什么问题和可能的问题解决方案？代码如下图所示。

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

Answer 1

Select需要初始化 - 在它被添加到 DOM 之后，以及随后每次渲染时:

var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);

仅供引用，Materialize 隐藏了 native 选择 (display:none)，并且仅在 init 运行时生成新的选择(实际上是由文本输入触发的下拉菜单)。您还可以在选择上使用 .browser-default 并绕过 init 和 materialize 样式。