javascript - React-select - 我不知道如何设置默认值
问题描述
这已经被问了好几次了,很抱歉,但我无法解决这个问题。我阅读了文档,但找不到任何有用的东西,所以我显然不明白这里发生了什么。
class DivisionExtraDetails extends Component {
constructor(props) {
super(props);
this.state = {
error: false,
loading: true,
removing: null,
saving: false,
geofence: false,
startTimeOfDay: ''
};
}
componentDidMount() {
const { division } = this.props;
Axios.get(`${API_URL}assetgroups/${division.id}`)
.then(r => {
this.setState({
loading: false,
geofence: r.data.geofence_assign,
startTimeOfDay: r.data.day_start
});
})
.catch(err => {
if (!Axios.isCancel(err)) {
this.setState({
error: true
});
}
});
}
render() {
const { error, loading, geofence, saving, startTimeOfDay } = this.state;
const { assignText, division } = this.props;
const geoFenceOptions = [
{value: 1, label: 'YES'},
{value: 0, label: 'NO'},
{value: null, label: 'Not yet set'},
];
return (
<React.Fragment>
<div className="col-5">
<span>Assign a GeoFence (Yes/No)</span>
<Select
selectedValue={geofence}
options={geoFenceOptions}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.handleChange}
/>
</div>
</React.Fragment>
);
}
}
我也试过:
defaultValue={geofence}
selectedValue={geofence}
value={geofence}
而且我还尝试了该变量:
{this.state.geofence}
如果我在开发工具中查看它,我可以看到对 db 的调用正在正确填充状态。但我无法解决。如果有人可以帮助完成这个看似简单的任务,那就太好了。谢谢。
解决方案
您value
在反应选择中作为布尔值或字符串传递,但您将对象作为选项传递,这就是反应选择无法找到显示默认值的原因。
要解决此问题,您需要在value
prop 中传递正确的对象,因此请尝试以下操作:-
class DivisionExtraDetails extends Component {
constructor(props) {
super(props);
this.state = {
error: false,
loading: true,
removing: null,
saving: false,
geofence: false,
startTimeOfDay: '',
// set geoFenceOptions as state so we can use it later
geoFenceOptions: [
{value: true, label: 'YES'},
{value: false, label: 'NO'},
{value: null, label: 'Not yet set'},
];
};
}
// find correct geoFenseOption based on provided value
getGeoFenceValue = (value) => {
return this.state.geoFenceOptions.find(option => option.value === value);
}
componentDidMount() {
const { division } = this.props;
Axios.get(`${API_URL}assetgroups/${division.id}`)
.then(r => {
this.setState({
loading: false,
geofence: this.getGeoFenceValue(r.data.geofence_assign), // call function to find correct option
startTimeOfDay: r.data.day_start
});
})
.catch(err => {
if (!Axios.isCancel(err)) {
this.setState({
error: true
});
}
});
}
render() {
const { error, loading, geofence, saving, startTimeOfDay, geoFenceOptions } = this.state;
const { assignText, division } = this.props;
return (
<React.Fragment>
<div className="col-5">
<span>Assign a GeoFence (Yes/No)</span>
<Select
selectedValue={geofence}
options={geoFenceOptions}
className="basic-multi-select"
classNamePrefix="select"
onChange={this.handleChange}
/>
</div>
</React.Fragment>
);
}
推荐阅读
- c++ - 距离向量末端的距离而不是仅仅计数背后的直觉
- ansible - 使用 Ansible Tower 测试 Ansible 角色
- python - 如何将字典作为参数传递,然后在使用它的函数中将其解包为变量?
- excel - 我有这段代码完全符合我的要求,但速度很慢。如果可能的话,希望指针可以帮助加快速度
- r - 根据 NA 模式选择特定行
- c# - 不支持关键字:'database=multitenant_clienta;trusted_connection'
- postgresql - Dbeaver AWS 复杂连接 - 从命令行通过 ssh 登录到 Ec2,然后连接到 Postgres
- search - 扩展 Umbraco 后台搜索以搜索自定义属性,而不仅仅是标题
- python - 为什么我的图不是二分的,以为我使用相应的 networkx 函数将它们创建为二分的?
- coq - Coq:活页夹下的参数重写