Блог

Я пытаюсь выполнить свою первую сборку Reactjs, используя только хуки, и я сталкиваюсь с проблемой, когда каждый раз, когда я нажимаю ввод в TableBody, я теряю фокус на вводе. Я читал, что это может быть проблема с ключами или фактической настройкой (т. Е. Нужно ли мне разделять мои TabularInputs и TableBody, а затем передавать реквизиты)? На данный момент мне действительно не помешало бы какое-то руководство, поскольку я застрял. Заранее спасибо и извините, если этот мусор режет вам глаза.

  /** @module src/components/GeoidCaculator/components/TabularInput */
import React, { useState } from 'react';
import {
    Col, Row, Table, Button,
} from 'react-bootstrap';
/**
 *@description Creates the tabular inputs for lat/lon
 * @param ()
 * @returns {Object} Returns TabularInputs jsx.
 */
function TabularInputs() {
    const defaultDDLoc = [
        {
            lat: '',
            lon: '',
            key: 'dd',
        },
    ];

    const defaultDMSLoc = [
        {
            degLat: '',
            minLat: '',
            secLat: '',
            dirLat: '',
            degLon: '',
            minLon: '',
            secLon: '',
            dirLon: '',
            key: 'dms',

        },
    ];

    const defaultDDMLoc = [

        {
            degLat: '',
            decMinLat: '',
            dirLat: '',
            degLon: '',
            decMinLon: '',
            dirLon: '',
            key: 'ddm',
        },
    ];

    const defaultFormats = [
        {
            DD: 'Decmial Degrees (DD)',
            DMS: 'Degrees Minutes Seconds (DMS)',
            DDM: 'Degrees Decimal Minutes (DDM)',
        },
    ];

    const [ddLoc, setLoc] = useState(defaultDDLoc);
    const [dmsLoc, setDMSLoc] = useState(defaultDMSLoc);
    const [ddmLoc, setDDMLoc] = useState(defaultDDMLoc);

    const [format, setFormat] = useState();

    /**
    *@description Handle input/state for lat
    * @param ()
    * @returns {Object} Returns lat.
    */
    const handleLocChanges = (event) => {
        const storedLoc = [...ddLoc];

        storedLoc[event.target.dataset.id][event.target.name] = event.target.value;

        setLoc(storedLoc);
        console.log(storedLoc);
    };

    /**
   *@description Handle input/state for lat
   * @param ()
   * @returns {Object} Returns lat.
   */
    const handleDMSLocChanges = (event) => {
        const storedDMSLoc = [...dmsLoc];

        storedDMSLoc[event.target.dataset.id][event.target.name] = event.target.value;

        setDMSLoc(storedDMSLoc);
        console.log(defaultDMSLoc[0].key);
    };

    /**
    *@description add button feature to add row
    *@param(event) onBlur event
    *@returns {Object} Returns new row for lat/lon inputs
    */
    const validateEntry = (event) => {
        const storedLoc = [...ddLoc];
    };

    /**
     *@description add button feature to add row
     *@param()
     *@returns {Object} Returns new row for lat/lon inputs
     */
    const addNewRow = () => {
        setLoc((prevLoc) => [...prevLoc, { lat: '', lon: '' }]);
    };

    /**
    /**
     *  *@description add button feature to add row
    *@param()
    *@returns {Object} Returns new row for lat/lon inputs
    */
    const deleteLastRow = () => {
        const currentLoc = [...ddLoc];
        currentLoc.pop();
        setLoc(currentLoc);
    };

    /**
    *@description add button feature to add row
    *@param()
    *@returns {Object} Returns new row for lat/lon inputs
    */
    const resetState = () => {
        setLoc(defaultDDLoc);
    };

    /**
     *@description Creates the tabular inputs for lat/lon
    * @param ()
    * @returns {Object} Returns TabularInputs jsx.
    */
    const TableBody = () => {
        setFormat(defaultFormats[0].DMS);

        if (format === defaultFormats[0].DMS) {
            return (
                <tbody id="tableBody" className="col-lg-8 col-lg-offset-2">
                    {dmsLoc.map((item, index) => (
                        <tr id="tableRow" key={defaultDMSLoc[0].key}>
                            <td className="llFormat">
                                {format}
                            </td>
                            <td className="dmsDegreeRow">
                                <p className="symbols">
                                    <input
                                        className="dmsDegreeInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.degLat}
                                        data-id={index}
                                        name="degLat"
                                    />
                                    amp;deg;
                                </p>
                            </td>
                            <td className="dmsMinutesRow">
                                <p className="symbols">
                                    <input
                                        className="dmsMinutesInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.minLat}
                                        data-id={index}
                                        name="minLat"
                                    />
                                    amp;apos;
                                </p>
                            </td>
                            <td className="dmsSecondsRow">
                                <p className="symbols">
                                    <input
                                        className="dmsSecondsInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.secLat}
                                        data-id={index}
                                        name="secLat"
                                    />
                                    amp;quot;
                                </p>
                            </td>
                            <td className="dmsDirRow">
                                <p className="symbols">
                                    <input
                                        className="dmsDirInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.dirLat}
                                        data-id={index}
                                        name="dirLat"
                                    />
                                    amp;deg;
                                </p>
                            </td>
                            <td className="dmsDegreeRow">
                                <p className="symbols">
                                    <input
                                        className="dmsDegreeInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.degLon}
                                        data-id={index}
                                        name="degLon"
                                    />
                                    amp;deg;
                                </p>
                            </td>
                            <td className="dmsMinutesRow">
                                <p className="symbols">
                                    <input
                                        className="dmsMinutesInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.minLon}
                                        data-id={index}
                                        name="minLon"
                                    />
                                    amp;apos;
                                </p>
                            </td>
                            <td className="dmsSecondsRow">
                                <p className="symbols">
                                    <input
                                        className="dmsSecondsInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.secLon}
                                        data-id={index}
                                        name="secLon"
                                    />
                                    amp;quot;
                                </p>
                            </td>
                            <td className="dmsDirRow">
                                <p className="symbols">
                                    <input
                                        className="dmsDirInput"
                                        type="string"
                                        onChange={handleDMSLocChanges}
                                        value={item.dirLon}
                                        data-id={index}
                                        name="dirLon"
                                    />
                                    amp;deg;
                                </p>
                            </td>
                        </tr>
                    ))}
                </tbody>
            );
        }
        return (
            <tbody className="tableBody">
                {ddLoc.map((item, index) => (
                    <tr key={defaultDDLoc[0].key}>
                        <td className="llFormat">
                            {format}
                        </td>
                        <td className>
                            <p className="symbolss">
                                <input
                                    className="llInputs"
                                    type="string"
                                    onChange={handleLocChanges}
                                    value={item.lat}
                                    data-id={index}
                                    name="lat"
                                />
                                amp;deg;
                            </p>
                        </td>
                        <td>
                            <p className="symbolss">
                                <input
                                    className="llInputs"
                                    type="degree"
                                    value={item.lon}
                                    onChange={handleLocChanges}
                                    data-id={index}
                                    name="lon"
                                />
                                amp;deg;
                            </p>
                        </td>
                    </tr>
                ))}
            </tbody>
        );
    };

    return (
        <Col>
            <Row>
                <Table id="tabularInputs">
                    <thead id="tableHeader" className="col-lg-8">
                        <tr>
                            <th>Select Format</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                        </tr>
                    </thead>
                    <TableBody />
                </Table>
            </Row>
            <Row className="justify-content-md-center">
                <Button variant="dark" onClick={addNewRow}>Add Row</Button>
                <Button variant="dark" onClick={deleteLastRow}>Delete Row</Button>
                <Button variant="dark" onClick={resetState}>Reset</Button>
            </Row>
        </Col>
    );
}

export default TabularInputs;