मैं एक रिएक्ट प्रोजेक्ट पर काम कर रहा हूं, उस प्रोजेक्ट में मेरे पास एक फॉर्म है, उस फॉर्म में मेरे पास दो इनपुट हैं

टैग। पहले इनपुट टैग के लिए मैंने मूल्य को परिभाषित किया है, दूसरे इनपुट टैग के लिए मैं मूल्य निर्दिष्ट कर रहा हूं

राज्य का उपयोग करना। अब मैं दो इनपुट टैग के मूल्यों को सांत्वना देने की कोशिश कर रहा हूं, लेकिन मुझे केवल दूसरा मिल रहा है

इनपुट टैग मान। तो कोई कृपया फॉर्म से दो इनपुट टैग मान प्राप्त करने में मेरी सहायता करें

यह फॉर्म.जेएस है


import React, { useState } from 'react';
import './aum-company-modal.css';
import Aumservice from '../../service/aum-service';
import { Button, Col, Modal, ModalBody,ModalFooter, ModalHeader, Row, FormGroup, Label, Input, } from 'reactstrap';

const AumCompanyModal = (props) => {

    const [data, sendData] = useState({})


    const [firstInputValue] = useState('1000')
    const [inputValue, setInputValue] = useState('');


    const handleChange = ({target}) => {
        const { name, value } = target;
        console.warn(name,value)
const newData = Object.assign({}, data, { [name]: value })
        sendData(newData)
        if (value > -1 && value < 100000000000000000000000000000000000) {
            setInputValue(value);
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        console.log(data)
    }


    return (
        <Row>
            <Col md="6" sm="6" xs="6">

                <Modal isOpen={props.openModal}
                >
                    <ModalHeader >Add new</ModalHeader>
                    <ModalBody>
                        <Row>
                            <Col md="12" sm="12" xs="12">
                                <FormGroup>
                                    <Label for="exampleName">Min Value</Label>
                                    <Input
                                        type="text"
                                        name="minValue"
                                        placeholder="Enter minimum value"
                                        value={firstInputValue}
                                    />
                                </FormGroup>
                                <FormGroup>
                                    <Label for="exampleName">Max Value</Label>
                                    <Input
                                        type="number"
                                        name="maxValue"
                                        placeholder="Enter maximum value"
                                        min='1000' max='100000000000000000000000000000000000'
                                        value={inputValue}
                                        onChange={handleChange}
                                    />
                                </FormGroup>
                            </Col>

                        </Row>


                    </ModalBody>
                    <ModalFooter>
                        <Button color="secondary" onClick={props.closeModal}>
                            Cancel
                </Button>
                        <Button type="submit" onClick={handleSubmit} color="primary">
                            Submit
                </Button>
                    </ModalFooter>
                </Modal>
            </Col>
        </Row>
    )
}

export default AumCompanyModal

यदि आपको कोई संदेह है तो कृपया टिप्पणी करें।

0
Cruse 17 अप्रैल 2020, 14:43

1 उत्तर

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

यदि किसी कारण से, आपको कुछ मूल्य को हार्ड कोड करने की आवश्यकता है, तो राज्य चर को मान के रूप में उपयोग करें और फिर आपके पास वह चर handleSubmit होगा। या आप ref का उपयोग कर सकते हैं और उस रेफरी से मूल्य प्राप्त कर सकते हैं

const [firstValue] = useState('100');
<Input
   type="text"
   name="minValue"
   placeholder="Enter minimum value"
   value={firstValue}
/>

या आप React.useRef() का उपयोग कर सकते हैं

const firstInput = React.useRef();

<Input
   type="text"
   name="minValue"
   placeholder="Enter minimum value"
   value="1000"
   ref={firstInput}
/>
// in handleSubmit
const handleSubmit = (e) => {
    e.preventDefault()
    console.log(firstInput.current.value)
}

1
Zohaib Ijaz 17 अप्रैल 2020, 11:51