在组件中使用 useState 挂钩将值传递给组件的父组件是一个好习惯吗？

Question

我正在尝试创建一个输入组件，该组件可以在任何存储输入值的页面中动态使用，并具有一个属性 getValue ，该属性允许组件的父级访问它。在 App.js 中，我有一个名为“info”的对象，它存储从输入组件获取的值。下面的代码可以很好地解决这个问题吗？

Input.js

const Input = ({placeholder, getValue}) => (
    <input 
        placeholder={placeholder} 
        onChange={({target}) => getValue(target.placeholder, target.value)} 
    />
)

Input.defaultProps = {
    getValue: (key, value) => {}
}

export default Input;

App.js

import { useState } from "react";
import Input from "./Input.js";

const App = () => {
    const [info, setInfo] = useState({});

    const addToInfo = (name, val) => {
        let keyWord = (name.charAt(0).toLowerCase() + name.slice(1)).replace(/\s/g, "");
        setInfo(prev => ({...prev, [keyWord]: val}))
    }

    return (
        <div>
            <h1>Hello {info.firstName && info.firstName} {info.lastName && info.lastName}</h1>
            <Input placeholder="First Name" getValue={(name, val) => addToInfo(name, val)}/>
            <br/>
            <Input placeholder="Last Name" getValue={(name, val) => addToInfo(name, val)}/>
            <br/>
            <Input placeholder="Email" getValue={(name, val) => addToInfo(name, val)}/>
            <br/>
            <Input placeholder="Phone Number" getValue={(name, val) => addToInfo(name, val)}/>
            <br/>
            <button onClick={() => console.log(info)}>Console Log the Info</button>
        </div>
    );
}

export default App;

Answer 1

我建议你可以看看 Formik，他们的方法正是解决你的问题，即将值传递给父级，这是他们使用的基本结构：

<Formik>
{(props) => (
    <Form>  // This is from Formik
    // your basic form stuff
    </Form>
)}
</Formik>

On how to make the

< /Form> 可重复使用，上次我询问了他们的一位贡献者，请随意查看：让Formik成为自定义组件

这是Formik官方网站
希望这可以帮助您汲取一些灵感！