मैंने एक चयन फ़ील्ड के लिए एक घटक बनाया (यह वास्तव में एक फ़ंक्शन है लेकिन मुझे लगता है कि उन्हें घटक कहा जाता है?)
const useStyles = makeStyles((theme) => ({
formControl: {
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}))
export default function SelectField() {
const classes = useStyles()
const [value, setValue] = React.useState("")
return(
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="age">Age</InputLabel>
<Select
labelId="age"
id="age"
label="Age"
key="index"
value={value}
onChange={(val) => setValue(val)}
>
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
)
}
और मैं इस चयन फ़ील्ड का उपयोग किसी अन्य "घटक" पर कर रहा हूं (मैं केवल उस फ़ील्ड के लिए आयात दिखाऊंगा)।
import SelectField from './fields/select'
export default function CreateGame(){
const [questions, setQuestions] = React.useState([{
question: 'asdasdasd',
answer: '',
score: '',
age: ''
}])
const HandleField = (event, index, field) => {
let temp_questions = questions
temp_questions[index][field] = event.target.value
setQuestions(temp_questions)
console.log(questions)
}
const setAge = (e, index) => {
let questions_temp = questions
questions_temp[index]['age'] = e.target.value
setQuestions(questions_temp)
console.log(questions)
}
return(
<Card>
<CardContent>
<Typography>
Add Questions
</Typography>
{questions.map((value, index) =>
<Grid container spacing={1}>
<Grid item lg={2}>
<TextField
value={value['question']}
key={index}
label='Question'
variant='outlined'
onChange={e => HandleField(e, index, 'question')} />
</Grid>
<Grid item lg={2}>
<TextField
value={value['answer']}
key={index}
label='Answer'
variant='outlined'
onChange={e => HandleField(e, index, 'answer')} />
</Grid>
<Grid item lg={2}>
<TextField
value={value['score']}
label='Score'
key={index}
variant='outlined'
onChange={HandleField} />
</Grid>
<Grid item lg={5}>
<SelectField age={value['age']} setAge={setAge} index={index} />
</Grid>
</Grid>
)}
</CardContent>
<Button>Add</Button>
</Card>
)
}
मैं अपने <SelectField />
का चयनित मान प्राप्त करना चाहता हूं और इसे अपनी questions
स्थिति में सहेजना चाहता हूं, विशेष रूप से age
फ़ील्ड में। लेकिन मुझे नहीं पता कि उस मूल्य को कैसे हासिल किया जाए। मैंने वैल्यू प्रोप डालने की कोशिश की, लेकिन मुझे नहीं लगता कि यह सही तरीका है।
2 जवाब
राज्य को केवल माता-पिता में रखें, और इसे एक प्रोप के साथ-साथ एक अन्य प्रोप के रूप में पास करें - एक फ़ंक्शन जिसे, जब कहा जाता है, तो माता-पिता में उम्र निर्धारित करता है।
आपको onChange
के आकार को भी ठीक करने की आवश्यकता है - यह ईवेंट के तर्क को स्वीकार करता है, नए मान के नहीं।
// in CreateGame
const setAge = i => (newAge) => {
setQuestions([
questions.slice(0, i),
{ ...questions[i], age: newAge },
questions.slice(i + 1),
]);
};
// ...
<Grid item lg={5}>
<SelectField age={questions.age} setAge={setAge(index)} />
</Grid>
export default function SelectField({ age, setAge }) {
// ...
<Select
value={age}
onChange={e => setAge(e.currentTarget.value)}
आप इन चरणों से गुजर सकते हैं
- Step 1 Make an onchange event listener
<SelectField onChange={handleQuestion}/>
- Step 2 Use Hooks to make a state inside functional component
const [Question, setQuestion] = useState("")
- Step 3 Make the method that you had called in step 1
const handleQuestion = () =>{
//First get the value coming fron the onchange listener
console.log(e.target.value);
//Set the state to the question
setQuestion(e.target.value)
}
- Step 4 Pass the value to the question
<TextField
value={Question}//Pass the questions state value here
/>
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।