React Hooks - Как я могу провести рефакторинг этих динамически генерируемых входов? - PullRequest
1 голос
/ 28 октября 2019

Я пытаюсь использовать динамически создаваемые входные данные, и мне было интересно, как я мог бы улучшить код.

Идея состоит в том, чтобы иметь объект "конфигурации", который определяет генерацию ввода.

Меня интересуют все предложения, такие как улучшенные шаблоны, переименование переменных / компонентов / css-классов, перемещение кода, возможные проблемы, неэффективность ...

Мое возможное улучшение заключается в перемещениисостояние ввода внутри компонента Inputs, а не текущего компонента Journal. Не уверен, что это хорошая идея ...

Journal.js

import React, { useState, useEffect } from "react";
import Inputs from '../layout/Inputs';

function Journal(props) {

    const [inputsJournalItems, setInputsJournalItems] = useState({
        documentKey: "",
        documentDate: ""
    });

    // generic handler based on the input name
    const handleInputChange = e => {
        setInputsJournalItems({
            ...inputsJournalItems,
            [e.target.name]: e.target.value
        })
    }

    // log the state after re-render
    useEffect(() => {
        console.log(inputsJournalItems)
    }, [inputsJournalItems]);

    // how to avoid including the handler for each input?
    const inputs = [
        { type: "input", label: "Document", name: "documentKey", handleInputChange },
        { type: "input", label: "Date", name: "documentDate", handleInputChange },
        { type: "button", value: "Save", name: "save" },
    ];

    return (
        <div>
            <Inputs
                data={inputsJournalItems}
                inputs={inputs} />
        </div >
    )
}

export default Journal;

Inputs.js

import React from 'react';
import Input from '../layout/Input';

function Inputs(props) {
    return (
        <div className="inputs">
            {
                props.inputs.map(input => {
                    return (
                        <Input
                            type={input.type}
                            label={input.label}
                            name={input.name}
                            handleInputChange={input.handleInputChange}
                            value={input.value ? input.value : props.data[input.name]}
                        >
                        </Input>
                    )
                })
            }
        </div>
    )
}

export default Inputs;

Input.js

import React from 'react';

function Input(props) {
    let inputId = `input-${props.name}`;
    return (
        <div className="input-group">
            <label>{props.label}</label><br></br>
            <input
                type={props.type}
                id={inputId}
                name={props.name}
                onChange={props.handleInputChange}
                value={props.value}
            />
        </div>
    )
}

export default Input;

1 Ответ

2 голосов
/ 28 октября 2019

У меня есть несколько предложений и несколько модификаций, которые могут сделать вещи более чистыми и ремонтопригодными для вас:

вы можете проверить это на codesandbox.io

илизапустив фрагмент ниже

<iframe
     src="https://codesandbox.io/embed/nervous-snow-sefyi?fontsize=14"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="nervous-snow-sefyi"
     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
   ></iframe>

Демонстрационный снимок экрана

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...