我目前正在创建一个表格。有一个textInput。如果用户输入了错误的邮政编码,我想显示一个禁用的下拉菜单。如果用户输入正确的邮政编码,则将启用该下拉列表,并从宁静的API请求数据。

问题是:我发送的道具“已禁用”,但显然无法正常工作。

class SelectJob extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            jobList:[],
            selectedJob:'default',
            loading:false,
            disabled:true
        }
        this.getJobs = this.getJobs.bind(this);
        this.jobHandler = this.jobHandler.bind(this);

    }

.
.
.

componentDidMount(){
            this.getJobs();
            this.setState({disabled:this.props.disabled});
};


render(){
        return(
            <MDBRow>
                <MDBCol sm="2">
                    {this.state.loading && <FontAwesomeIcon className="align-middle" spin icon={faSpinner}/>}
                </MDBCol>
                <MDBCol>
                    <select
                        disabled={this.state.disabled == true ? true : false}
                        id="jobId"
                        className="browser-default custom-select"
                        onChange={this.jobHandler}
                        value={this.state.selectedJob}>

                        <option disabled value="default">Profissão</option>
                        {!this.state.loading && this.state.jobList.map(
                            (job) => <option value={job.code} key={job.code}>{job.desc}</option>)
                        }
                    </select>
                </MDBCol>
            </MDBRow>
        )
    }


没有错误,但是禁用不起作用。
它保持启用状态。

render(){
        let selectJobAlias;

        if (this.state.setted === true){
            selectJobAlias = <SelectJob disabled="false" addressPostCode={this.state.addressPostCode}/>
        }
        else {
            selectJobAlias = <SelectJob disabled="true" addressPostCode={this.state.addressPostCode}/>
        }

最佳答案

    <select
 disabled={this.state.disabled ? true : null}
                            id="jobId"
                            className="browser-default custom-select"
                            onChange={this.jobHandler}
                            value={this.state.selectedJob}>

关于javascript - 如何根据 Prop 更改类(class)渲染?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58225571/

10-13 02:33