时间戳

首页 > 解决方案 > 创建一个基于 props 更改其类型并支持所有输入类型的单个输入组件是否可行？或者组件会变得复杂吗

javascript - 创建一个基于 props 更改其类型并支持所有输入类型的单个输入组件是否可行？或者组件会变得复杂吗

问题描述

我正在学习 React，并决定尝试创建一个具有不同输入的表单。在为所有不同的输入类型复制粘贴标签和输入 10 次之后，我觉得我应该尝试创建一个组件，该组件将根据传递给它的道具呈现不同的输入。

我创建了以下组件，它适用于文本、密码、电子邮件、数字等输入。我这样使用它：

<FormGroup
    inputType="text"
    inputName="firstName"
    inputPlaceholder="First Name"
</FormGroup>

这是组件：

const FormGroup = (props) => {
    return (
        <div className="form-group">
            <label className="form-label" htmlFor={props.inputName}>
                <p>{props.inputPlaceholder}</p>
            </label>
            <input
                type={props.inputType}
                name={props.inputName}
                placeholder={props.inputPlaceholder}
            />
        </div>
    );
};

export default FormGroup;

问题是，当我开始考虑像上传、范围、复选框、日期、范围这样的输入时，我开始想知道创建一个可以处理任何输入类型的通用输入组件是否可行。也许组件会变得太大/复杂/混乱。我应该继续尝试创建这样的通用输入组件，还是尝试替代方案？

标签： javascriptreactjs

解决方案

这是可行的，但随着您添加对更多类型的支持，它变得非常复杂。

对于表单处理，您最好使用还管理输入状态的库。

Formik 是目前流行且可靠的选择 https://formik.org/

尝试浏览他们的文档，即使您决定不使用它，它也应该让您更好地了解您想要实现的目标的要求

推荐阅读