React类组件通过类名控制多个元素显隐失效问题

• 核心错误是下拉框选中值的获取方式错误：select 元素的选中值存放在 e.target.value 中，你代码里写的 e.target.value1、e.target.value2 是不存在的属性，读取结果为 undefined，导致 state 赋值失败。这时候控制显隐的 div 的 className 会变成 undefined，你的 .no 隐藏样式不会生效，所以所有 div 都会默认显示，也无法正常切换状态。
• 次要问题：下拉框没有和 state 做双向绑定，初始选中状态和 state 初始值不匹配，可能引发渲染异常；constructor 中对箭头函数的手动 bind 操作是多余的，箭头函数已经自动绑定了组件实例的 this。

组件代码 #

import { Component } from 'react';

class PersonalInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value1: 'no',
            value2: 'no'
        };
    }

    divstatus1 = (e) => {
        // 正确获取select选中值，空值默认按no处理
        const val = e.target.value || 'no';
        this.setState({ value1: val });
    }

    divstatus2 = (e) => {
        const val = e.target.value || 'no';
        this.setState({ value2: val });
    }


    render() {
        return (
            <div>
                <h3 className="showbase_header">Passport Details</h3>
                <div className="form-group">
                    <label htmlFor="orderby"> Do you have passport ?</label>
                    {/* select的value和state绑定，实现双向绑定 */}
                    <select 
                        className="form-control orderby" 
                        value={this.state.value1}
                        onChange={this.divstatus1}
                    >
                        <option value="">Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select>
                    <br></br>
                    <div className={this.state.value1} >
                        <div className="row">
                            <div className="col-md-6 form-group">
                                <label htmlFor="name">Passport Number
                                    <span className="required">*</span>
                                </label>
                                <input type="text" id="firstname" aria-required="true" size={30} name="firstname" className="form-control" placeholder="" />
                            </div>
                            <div className="col-md-6 form-group">
                                <label htmlFor="name">Place Of Issue
                                    <span className="required">*</span>
                                </label>
                                <input type="text" id="lastname" aria-required="true" size={30} name="lastname" className="form-control" placeholder="" />
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-sm-6 form-group">
                                <label htmlFor="expirydate">Expiry Date
                                    <span className="required">*</span>
                                </label>
                                <input type="date" id="expirydate" aria-required="true" size={30} name="expirydate" className="form-control" placeholder="" />
                            </div>
                            <div className="col-sm-6 form-group">
                                <label htmlFor="issuedate">Issue Date
                                    <span className="required">*</span>
                                </label>
                                <input type="date" id="issuedate" aria-required="true" size={30} name="issuedate" className="form-control" placeholder="" />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="form-group">
                    <h3 className="showbase_header">Representation</h3>
                    <select 
                        className="form-control orderby" 
                        value={this.state.value2}
                        onChange={this.divstatus2}
                    >
                        <option value="">Select</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                    </select><br />
                    <div className={this.state.value2} >
                        <div className="row">
                            <div className="col-sm-6 form-group">
                                <label htmlFor="name">Name
                                    <span className="required">*</span>
                                </label>
                                <input type="text" id="name" aria-required="true" size={30} name="name" className="form-control" placeholder="" />
                            </div>
                            <div className="col-sm-6 form-group">
                                <label htmlFor="number">Contact Number
                                    <span className="required">*</span>
                                </label>
                                <input type="number" id="contact-number" aria-required="true" size={30} name="number" className="form-control" placeholder="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default PersonalInfo;

CSS代码（原有逻辑可直接沿用） #

.yes{display: block;}
.no{display: none;}

内容的提问来源于stack exchange，提问作者Narayan P.