मैं प्रतिक्रिया रूपों का अभ्यास करने की कोशिश कर रहा हूं, और मैं इस त्रुटि को हल नहीं कर सकता। मैं एक बहु-इनपुट प्रपत्र विकसित किया है और मैं माता पिता के राज्य को अद्यतन करने के लिए मूल्य की जरूरत है। जब मैं इनपुट फ़ील्ड में टाइप करना शुरू करता हूं तो यह स्विच केस डिफॉल्ट को ट्रिगर करता है। मुझे यकीन नहीं है कि शायद मैं 'हैंडल चेंज' फ़ंक्शन गलत टाइप कर रहा हूं या अगर मेरे पास राज्य के लिए एक अलग राज्य होना चाहिए। डेटा। कोई भी सलाह काफी सराही जाएगी

import React, { useState } from 'react';
import Form from './Form';
import Results from './Results';

function App() {
    const [state, setState] = useState({
        data: 1,
        Name: '',
        Email: '',
        City: ''
    });

    const nextStep = () => {
        setState({
            data: state.data + 1
        });
  };

  const handleChange = e => {
        let field = e.target.name;
        let val = e.target.value;
        setState({ [field]: val });
    };

    switch (state.data) {
        case 1:
            return (
                <div className='App-container'>
                    <Form
                        button='Next'
                        nextStep={nextStep}
                        name='Name'
                        state={state.name}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 2:
            return (
                <div className='App-container'>
                    <Form
                        button='Next'
                        nextStep={nextStep}
                        name='Email'
                        state={state.email}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 3:
            return (
                <div className='App-container'>
                    <Form
                        button='Submit'
                        nextStep={nextStep}
                        name='City'
                        state={state.city}
                        handleChange={handleChange}
                    />
                </div>
            );
        case 4:
            return (
                <div className='App-container'>
                    <Results data={state} />
                </div>
            );
        default:
            return 'Error';
    }
}

export default App;

import React from 'react';

const Form = ({ button, nextStep, name, state, handleChange }) => {
    const handleSubmit = e => {
        e.preventDefault();
        nextStep();
    };

    return (
        <div className='Form-container'>
            <form onSubmit={handleSubmit}>
                <input
                    type='text'
                    placeholder={name}
                    name={name}
                    value={state}
                    onChange={handleChange}
                />
                <input type='submit' value={button} />
            </form>
        </div>
    );
};

export default Form;


import React from 'react';

const Results = ({ data }) => {
    return (
        <div>
            <h1>Info</h1>
            <p>{data.name}</p>
            <p>{data.email}</p>
            <p>{data.city}</p>
        </div>
    );
};

export default Results;
1
Kelenus 31 मार्च 2020, 08:09

3 जवाब

सबसे बढ़िया उत्तर

आप handleChange पर राज्य खो रहे हैं, जबकि यह उम्मीद कर रहे हैं कि यह वर्तमान में विलय हो जाएगा, लेकिन यह यह नहीं है कि useState कैसे काम करता है वर्ग घटकों में this.setState के विपरीत:

// Results new state: { data };
setState({ data: state.data + 1 });

// Instead update the copy of the state.
// Results new state: { data, Name, Email, City }
setState({ ...state, data: state.data + 1 });

दस्तावेज़ में useState नोट देखें:

ध्यान दें

वर्ग घटकों में पाई जाने वाली सेटस्टेट विधि के विपरीत, यूज़स्टेट स्वचालित रूप से अद्यतन वस्तुओं को मर्ज नहीं करता है। आप ऑब्जेक्ट स्प्रेड सिंटैक्स के साथ फंक्शन अपडेटर फॉर्म को मिलाकर इस व्यवहार को दोहरा सकते हैं।

एक अन्य विकल्प useReducer है, जो राज्य वस्तुओं के प्रबंधन के लिए अधिक उपयुक्त है जिसमें कई उप-मान होते हैं।

0
Community 20 जून 2020, 12:12

आपको पुरानी स्थिति को बख्शने की जरूरत है

  const handleChange = e => {
        let field = e.target.name;
        let val = e.target.value;
        setState({ ...state, [field]: val });
    };

यह setState({ ...state, [field]: val }); है

0
Suhag Lapani88 31 मार्च 2020, 08:27

मैं फॉर्म इनपुट के लिए एक कस्टम हुक का उपयोग करने की सलाह देता हूं। जैसे निम्नानुसार है

//useForm.js

const useForm = defaultValues => {
  const [values, setValues] = useState(defaultValues);
  const handleChange = ({ name, value }) => {
    setValues(prevState => ({ ...values, [name]: value }));
  };
  const reset = () => {
    setValues(null);
  };
  return [values, handleChange, reset];
};

आंतरिक घटक

 const [formValues, handleChange, resetForm] = useForm();

 return (
    <>
     <Input
       value={formValues.name}
        onChange: str => handleChange({ name: "name", value: str })
      />

     <Input
       value={formValues.email}
        onChange: str => handleChange({ name: "email", value: str })
      />
    </>
  )
0
vamshi krishna 31 मार्च 2020, 08:18