Javascript 设置类（如果已填充或为空）

我正在构建自己的自定义选择器，如果选择了或没有选择，我需要设置一个类。为什么这不起作用

我是新来的，所以请容忍我。我还需要再打一些，然后才能发布我的问题，虽然我不知道如何进一步阐述这个问题，因为它可能很清楚我做错了什么

编辑：我已经将道具更改为状态，但它仍然不起作用。当我从下拉列表中选择时，我没有选择我选择的选项，也没有设置正确的类。空的，不是空的，所以我认为有些事情在逻辑上是不正确的

import React, { Component } from 'react'

const optionsData = [
    'Select',
    'Option1',
    'Option2',
    'Option3'
]

class CustomSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            placeholder:'',  
            id:'', 
            onChange:'', 
            label:'', 
            value:'',
            validationMsg:'',
            disabled:''
        };
    }
    onFocus = () => {          
        this.setState({    
            onFocus: true
        });
    }
    // Fix so when you dont make a choice it still lose focus
    onBlur = () => {          
        this.setState({    
            onFocus: false
        });
    }
    onChange = () => {          
        this.setState({    
            onFocus: false
        });
    }    

    getClass = () => {
        if (this.state.onFocus === true)
            return "in-focus"
        else if (!this.state.value === '' | !this.state.value === 'Select')
            return "not-empty"
        else if (this.state.value === '')
            return "empty"
        else
            return "";
    }

    render() {
        let inputFocus = this.getClass();
        return (  
            <div className={`form-item ${inputFocus}`}>
                {this.props.label && 
                    <label htmlFor={this.props.id}>
                        {this.props.label}
                    </label>
                }
                <select 
                    id={this.state.id} 
                    placeholder={this.state.placeholder} 
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange} 
                    disabled={this.state.disabled} 
                    value={this.state.value ? this.props.value : ''}
                > 
                    {optionsData.map(option => 
                        <option 
                            key={option}
                            value={option}
                        >
                            {option}
                        </option>
                    )} 
                </select>
                {/* {this.props.validationMsg && <span className="validation-message">{this.props.validationMsg}</span>} */}
            </div>
        )
    }
}

export default CustomSelect

你需要改变

this.props.label到this.state.label

this.props.placeholder到this.props.placeholder

this.props.id到this.state.id

同样，对于这些项目中的每一项。你的代码应该可以工作了。 您可能希望了解以下内容：

另外，将setClass的名称更改为getClass。这以更好的方式表达了它的用法

更新：现在，由于您已经完成了更改，下拉列表不起作用的原因是，在handleChange中，您没有设置在select中使用的状态值

---

那么，到底是什么在这方面不起作用呢？另外，将名称从setClass更改为getClass。这将有助于其他人理解您的代码。谢谢您的回复。我已经改变了你所说的内容，但仍然存在一些问题。我已经更新了主要帖子。有什么想法吗？

  onChange = (e) => {          
        this.setState({    
            onFocus: true, <--- you might like to set this true
            value: e.target.value <----- you'll have to do this
        });
    } 

    import React, { Component } from 'react'

const optionsData = [
    'Select',
    'Option1',
    'Option2',
    'Option3'
]

class CustomSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {
            placeholder:'',  
            id:'', 
            onChange:'', 
            label:'', 
            value:'',
            validationMsg:'',
            disabled:''
        };
    }
    onFocus = () => {          
        this.setState({    
            onFocus: true
        });
    }
    // Fix so when you dont make a choice it still lose focus
    onBlur = () => {          
        this.setState({    
            onFocus: false
        });
    }
    onChange = (e) => {          
        this.setState({    
            onFocus: true,
            value: e.target.value
        });
    }    

    getClass = () => {
        if (this.state.onFocus === true)
            return "in-focus"
        else if (!this.state.value === '' | !this.state.value === 'Select')
            return "not-empty"
        else if (this.state.value === '')
            return "empty"
        else
            return "";
    }

    render() {
        let inputFocus = this.getClass();
        return (  
            <div className={`form-item ${inputFocus}`}>
                {this.state.label && 
                    <label htmlFor={this.state.id}>
                        {this.state.label}
                    </label>
                }
                <select 
                    id={this.state.id} 
                    placeholder={this.state.placeholder} 
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    onChange={this.onChange} 
                    disabled={this.state.disabled} 
                    value={this.state.value ? this.state.value : ''}
                > 
                    {optionsData.map(option => 
                        <option 
                            key={option}
                            value={option}
                        >
                            {option}
                        </option>
                    )} 
                </select>
                {/* {this.props.validationMsg && <span className="validation-message">{this.props.validationMsg}</span>} */}
            </div>
        )
    }
}

export default CustomSelect