reactjs - 如何将选择下拉列表中的第一个值设置为默认反应
问题描述
我有一个反应程序,它根据下拉列表的值显示一个表格。我希望程序默认根据下拉列表中的第一个值显示表格。
下拉列表中的第一个值与默认值有很大不同,并且下拉列表值总是在变化。因此,数据在首次加载时可能会产生误导。
这是我的代码片段,里面有一些描述。谢谢。
const CompletenessApp = () => {
const [completeness, setcompleteness] = useState([]);
const [loading, setloading] = useState(false);
const [valueSelected, setValueSelected] = useState({value:'all'});
const [periodSelected, setPeriodSelected] = useState({value:'20200702'}); // the default value that is used to filter the data.
const valid = [
{id:"all", variable:"all"},{id:"true", variable:"true"}, {id:"false", variable:"false"}, {id:"null", variable:"null"},
];
useEffect(() => {
const fetchData = async () => {
try{
const res = await axios.get('http://localhost:8000/api/completeness/');
setcompleteness(res.data);
setloading(true);
} catch (e) {
console.log(e)
}
}
fetchData();
}, []);
// when the page loads for the first time it filters the data based on the period value set in the state. I want the data to be filtered based on the first value in the dropdown instead, the first value in the dropdown is different from the default value set.
const handlePeriodChange = e => {
setPeriodSelected({value : e.target.value})
}
const handleValueChange = e => {
let boolvalue = Boolean
e.target.value === 'true'? boolvalue = true:
e.target.value === 'false'? boolvalue = false:
e.target.value === 'all'? boolvalue = 'all':
boolvalue=null
setValueSelected({value : boolvalue})
}
//filtered data to be displayed
const filteredCompleteness = completeness.filter(
completedata=> (completedata.period === periodSelected.value)
&&(valueSelected.value !== 'all'?completedata.complete === valueSelected.value:{}))
return(
<div>
<div className="selection-row">
<div className="stats-columns">
<div className="stats-label">Period</div>
//the relevant dropdown is here
<select onChange={e => handlePeriodChange(e)}>
{Array.from(new Set(completeness.map(obj => obj.period)))
.sort().reverse()
.map(period => {
return <option value={period}>{period}</option>
})}
</select>
</div>
<div className="stats-columns">
<div className="stats-label">Value</div>
<select onChange={e => handleValueChange(e)}>
{valid.map((obj) => {
return <option value={obj.id}>{obj.variable}</option>
})
}
</select>
</div>
</div>
<hr></hr>
<div className="results-table">
//table is displayed here
</div>
</div>
);
}
export default CompletenessApp;
解决方案
// above return
const options = Array.from(new Set(completeness.map((obj) => obj.period)))
.sort()
.reverse()
.map((period) => {
return {
value: period,
label: period,
};
});
// in jsx
<select defaultValue={options[0].value} onChange={e => handlePeriodChange(e)}>
{
options.map((obj) => {
return <option value={obj.value}>{obj.label}</option>;
})
}
</select>
试试这个,让我知道。
推荐阅读
- csv - Read max value from CSV and write to new CSV
- javascript - 通过 javascript 或 typescript 编写包含一些对象的 .xlsx 文件有什么想法吗?
- sql - StreamSets 数据未登录到在 postgres db 上创建的表中
- java - WELD-001408:在注入点 [BackedAnnotatedField] @Inject 具有限定符 @Default 的类型 UserService 的依赖关系不满足
- javascript - Redux - 尝试添加一个函数来配置存储
- javascript - 当 Firestore.getAll(...promises) 被拒绝时如何“控制”
- linux-kernel - 错误::file `/boot/grub/i386-pc/normal.mod not found 并且 ls 显示 (hd0),(hd0,msdos1),(hd0,msdos5)
- reactjs - 如何在反应中渲染带有变量的html模板?
- spring-boot - 预期类型 'Upload' 是 GraphQLInputType 是仅允许用于错误地用作输入类型的对象类型的类型,反之亦然
- php - 根据变量获取数组中的最小值