मैंने एक चयन फ़ील्ड के लिए एक घटक बनाया (यह वास्तव में एक फ़ंक्शन है लेकिन मुझे लगता है कि उन्हें घटक कहा जाता है?)

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 फ़ील्ड में। लेकिन मुझे नहीं पता कि उस मूल्य को कैसे हासिल किया जाए। मैंने वैल्यू प्रोप डालने की कोशिश की, लेकिन मुझे नहीं लगता कि यह सही तरीका है।

0
plasmy 25 सितंबर 2020, 05:51

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)}
1
CertainPerformance 25 सितंबर 2020, 07:20

आप इन चरणों से गुजर सकते हैं

- 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
            />
0
Fahad 25 सितंबर 2020, 06:26