javascript - 使用构造函数作为自定义 React Hooks 有什么问题吗？

Question

我正在尝试在 React 应用程序中使用构造函数。但是，我以前从未见过有人讨论过这种用法，所以我想知道它是否存在我不知道的问题。

我有一个名为的构造函数NameSection，它就像一个 React 钩子。它有自己管理的状态（一个人的名字和姓氏）。我在我的PersonalInfo组件中使用它来呈现两件事之一：当前的名字/姓氏或两个字段的输入，以便可以编辑它们。

我使用构造函数的一个原因是因为我正在考虑将其转换为可以继承的接口。然后，我可以稍后实现需要遵循类似结构的 , 等PasswordSection。EmailSection

到目前为止，从我的测试来看，我没有看到在这个特定的上下文中使用构造函数有任何问题。但我想听听其他人对此的看法。在 React 的世界中，这种实现有什么问题吗？

在 PersonalInfo.js 中

const PersonalInfo = ({info}) => {
    const nameSection = new NameSection({firstName: info.firstName, lastName: info.lastName});

    return ( 
         <SettingsChild heading={"Name"} onSaveAttempt={nameSection.nameExitEdit} onEdit={nameSection.nameEnterEdit}  disableSave={nameSection.isNameSectionError()}>
              {nameSection.renderNameSection()}
         </SettingsChild>
    )
}

export default PersonalInfo;

在 NameSection.js 中

function NameSection({firstName, lastName}) {
    const initialNameSection = {
        editMode: false,
        firstName: {input: firstName, error: ""},
        lastName: {input: lastName, error: ""}
    }

    const [ data, setData ] = useState(initialNameSection);

    const handleNameChange = (event) => {
        const key = event.target.name;
        const value = event.target.value;
        setData(prev => ({
            ...prev,
            [key]: {input: value, error: ""}
        }))
    }

    this.isNameSectionError = () => (!data.firstName.input || !data.lastName.input);

    this.nameEnterEdit = () => {
        setData(prev => ({
            ...prev,
            editMode: true
        }))
    }
    this.nameExitEdit = () => {
        if (this.isNameSectionError()) {
            if (!data.firstName.input) {
                setData(prev => ({
                    ...prev,
                    firstName: {...prev.firstName, error: inputErrors.requiredField}
                }))
            }
            if (!data.lastName.input) {
                setData(prev => ({
                    ...prev,
                    lastName: {...prev.lastName, error: inputErrors.requiredField}
                }))
            }
        }
        else {
            setData(prev => ({
                ...prev,
                editMode: false
            }))
        }
    }

    this.renderNameSection = () => {
        return (
            data.editMode ? 
                <React.Fragment>
                    <TextBox label={"First name"} name={"firstName"} value={data.firstName.input} onChange={handleNameChange} errorMessage={data.firstName.error}/>
                    <TextBox label={"Last name"} name={"lastName"} value={data.lastName.input} onChange={handleNameChange} errorMessage={data.lastName.error}/>
                </React.Fragment>
                :
                <p>{`${data.firstName.input} ${data.lastName.input}`}</p>
        )
    }
    
}

export default NameSection;

标签： javascriptreactjs