Question

我试图使用动态创建的输入，并且想知道如何使代码更好。

这个想法是要有一个“配置”对象来确定输入的生成。

我对所有建议都感兴趣，例如更好的模式，重命名变量/组件/ 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;

Answer 1

我有一些建议和修改，可能会使您的内容更干净和可维护：

您可以在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>

演示截图

React Hooks-如何重构这些动态生成的输入？

1 个答案: