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

Question

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

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>

关于如何使 <Form></Form> 可重用，上次我问了他们的一位贡献者，请随意看一看：Make Formik a custom component

这是Formik official website 希望能对您有所启发！

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

Is this a good practice in using the useState hook in a component to pass values to the parent of the component?

javascript

functional-programming

reactjs

react-hooks