我目前正在创建一个表格。有一个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/