Javascript 出口组件价值的正确方法是什么？

我有一个动态生成的表单，它由各个组件组成。表单可以包含每个组件的无限数量的实例。它由

map（）

ing数组定义

// main.js
function submitHandler() {
    ...
}
...
<form onSubmint={submitHandler}>
    {formFields.map((item, index) => {
        {{
            'text': <UploadFormText name={someName} />,
            'image': <UploadFormImage name={someName} />,
            'video': <UploadFormVideo name={someName} />,
            'file': <UploadFormFile name={someName} />,
        }[item.type]}
    })}
</form>

我应该如何访问main.js中component.js的

值

，以验证和提交它？如果有多种方法，哪种方法最简单，哪种方法最好？

我会这样做

// main.js
function submitHandler() {
    ...
}
function getValue(value){                  //fn that gets the value.
    console.log(value);
}

<form onSubmit={submitHandler}>
    {formFields.map((item, index) => {
        {{
            'text': <UploadFormText getValue={getValue} name={someName} />,
            'image': <UploadFormImage name={someName} />,
            'video': <UploadFormVideo name={someName} />,
            'file': <UploadFormFile name={someName} />,
        }[item.type]}
    })}
</form>

//main.js
函数submitHandler（）{
...
}
函数getValue（value）{//fn获取值。
console.log（值）；
}
{formFields.map（（项，索引）=>{
{{
“文本”：，
“图像”：，
“视频”：，
“文件”：，
}[item.type]}
})}

然后像这样把它作为道具传下去

// component.js
export default function UploadFormText({ name, getValue }) {
    const [text, setText] = useState('')
    return (
        <>
            <input onChange={getValue} value={text} name={name} />
        </>
    )
}

//component.js
导出默认函数UploadFormText（{name，getValue}）{
const[text，setText]=useState（“”）
返回(
)
}

您可以通过调用main.js上的函数将其作为

props

传递，例如从组件调用

props.textFieldHandler（textValue）

，然后在main上有一个函数

const textFieldHandler=（val）=>{setValue（val）}

或只是simpy

useContext（）

hookthis可能对您有所帮助：@faramarzrazmi我认为这是关于处理动态行为的更一般的指导原则，但它没有反映主要问题。这就是如何从子组件中提取值的方法。它工作良好，适应性很小。我将

onChange

包装到我的自定义函数中，我在其中调用

getValue（{name，value}）

。在问这个问题之前，我还想：“如果我能传递一个函数呢？等等，一个函数？不可能。”。的确如此。

// component.js
export default function UploadFormText({ name, getValue }) {
    const [text, setText] = useState('')
    return (
        <>
            <input onChange={getValue} value={text} name={name} />
        </>
    )
}