Я пытаюсь использовать динамически создаваемые входные данные, и мне было интересно, как я мог бы улучшить код.
Идея состоит в том, чтобы иметь объект "конфигурации", который определяет генерацию ввода.
Меня интересуют все предложения, такие как улучшенные шаблоны, переименование переменных / компонентов / 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;