javascript - React Hooks - 我如何重构这些动态生成的输入?
问题描述
我正在尝试使用动态创建的输入,并且想知道如何使代码更好。
这个想法是有一个确定输入生成的“配置”对象。
我对所有建议都感兴趣,比如更好的模式、重命名变量/组件/css-classes、移动代码、可能的问题、效率低下......
我可能的改进是将输入状态移动到Inputs
组件内部,而不是当前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;
输入.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;
解决方案
我有一些建议和一些修改可能会让您的事情变得更清洁和可维护:
或者通过运行下面的代码片段
<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>
演示截图
推荐阅读
- javascript - How to logout the authenticated token correctly after API call returns response?
- python - 有没有办法为单选按钮定义命令以在多项选择测验中显示正确或错误答案?
- reactjs - TypeError: this.props.likeMovie 不是函数
- java - Should i make an instance of my controller for every instance of my ListItem?
- java - 从android中的Firebase读取变量后如何更改变量的值?
- json - jq 打印版本号是否为依赖项或开发依赖项
- vim - 当子替换表达式中抛出异常时,Vim 替换空字符串
- javascript - how to remove bullet points from tasks rendered by marked.js
- reactjs - React 在数组的最后一个添加对象工作正常,但在数组开始时它不起作用
- data-structures - Best method of store & address to set of texts