[英]How to conditionally render data based on selected value in react-select
嘿,我是新來的反應和自學。 有人可以指出我正確的方向或給我一些線索。 我的頁面頂部顯示了一個反應選擇組件。 此組件中的數據是從我的 useContext 提供程序填充的。 我想要的結果是,當用戶選擇某個組件時,我想用具有相應數據的相關卡片填充頁面。 所有數據都在我的 authContext 中可用。
我已經走到了這一步,但是當用戶從下拉列表中選擇值時,沒有任何填充。 有人可以幫忙嗎:-
import React, { useContext, useEffect, useState } from 'react'
import styles from './FullRecord.module.css'
import {AuthContext} from '../../shared/context/auth-context'
import Select from 'react-select'
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles({
custom: {
backgroundColor: "#558d6b",
fontWeight: "bold"
},
customFont: {
fontWeight: "bold",
fontSize: "20px"
},
customFont1: {
fontWeight: "light"
}
});
const FullRecord = (props) => {
let data
const auth = useContext(AuthContext)
const [edition1, setEdition1] = useState(false)
const options = auth.tournaments.map((tournament) => {
return {
value: tournament.TournamentName,
label: tournament.TournamentName,
}
})
console.log(options)
const classes = useStyles();
const handleChange = (selectedValue1) => {
console.log(selectedValue1)
setEdition1(true)
const {value} = selectedValue1
console.log(value)
console.log(edition1)
if(value === 'GSM Edition 1'){
const noOfMatches = auth.profile.MemberMatches.filter((match) => match.TournamentName === 'GSM Edition 1')
console.log(noOfMatches)
data =
<div>
<li className={styles['member-item']}>
<Card className={classes.custom} variant="outlined">
<CardContent>
<Typography className={classes.customFont} gutterBottom>
Number Of Matches Played
</Typography>
<Typography className={classes.customFont}>
{noOfMatches}
</Typography>
</CardContent>
</Card>
</li>
</div>
}
}
return (
<React.Fragment>
<div className={styles['fullrecord__maindiv']}>
<Select
// value={options.value}
onChange={handleChange}
options={options}
/>
</div>
{edition1 && <div>
{data}
</div>}
</React.Fragment>
)
}
export default FullRecord
You can Use This for React Select:
Example of Data in DropDown::
const projectTermData = [];
const terms = [{"id":"1","description":"Due on receipt","value":"0"},{"id":"2","description":"Net 30","value":"30"},{"id":"3","description":"Net 60","value":"60"},{"id":"4","description":"Net 90","value":"90"}]
terms.map(el => {
projectTermData.push({
key: el.id,
value: el.id,
label: el.description
});
});
<Select name="term_id" style="" isMulti={false} defaultValue={ term_id != "" ? projectTermData.find( item => item.value === term_id ) : { label: "Select Customer Type", value: 0 } } onChange={projectTermData => handleChange({ name: "term_id", key: projectTermData.value, label: projectTermData.label, value: projectTermData.value }) } options={projectTermData} />
<!-- end snippet -->
<!-- Handle Change Function -->
const handleChange = (e)=> {
let obj;
if (e.target) {
obj = e.target;
} else {
obj = e;
}
const { name, key, label, value } = obj;
setFormValues(prev => ({
...prev,
[name]: obj.value
}));
// setFormErrors({...errorValues})
let errorVar = fieldErrorMap[name];
let errorVarMsg = fieldErrorMsgMap[name];
if (obj.value === "") {
setFormErrors({ ...formErrors, [errorVar]: true });
} else {
if (new Date(formValues.start_date) >= new Date(formValues.end_date)) {
setFormErrors({ ...formErrors, endDtErrorMsg: true });
}
setFormErrors({ ...formErrors, [errorVar]: false });
}
};
data
似乎是來自選擇選項的“派生狀態”,但由於它不在狀態,因此您沒有任何東西可以觸發重新渲染來執行任何操作。
我建議將選定的選項存儲在 state 中並計算data
JSX。
const FullRecord = (props) => {
const auth = useContext(AuthContext);
const [edition1, setEdition1] = useState(false);
const [selectedOption, setSelectedOption] = useState({}); // <-- add selected option state
const options = auth.tournaments.map((tournament) => ({
value: tournament.TournamentName,
label: tournament.TournamentName,
}))
const classes = useStyles();
const handleChange = (selectedValue1) => {
setEdition1(true);
setSelectedOption(selectedValue1); // <-- update selected option state
}
return (
<React.Fragment>
<div className={styles['fullrecord__maindiv']}>
<Select
onChange={handleChange}
options={options}
/>
</div>
{edition1 && selectedOption.value === 'GSM Edition 1' (
<div>
<li className={styles['member-item']}>
<Card className={classes.custom} variant="outlined">
<CardContent>
<Typography className={classes.customFont} gutterBottom>
Number Of Matches Played
</Typography>
<Typography className={classes.customFont}>
{auth.profile.MemberMatches.filter((match) => match.TournamentName === 'GSM Edition 1')}
</Typography>
</CardContent>
</Card>
</li>
</div>
)}
</React.Fragment>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.