时间戳

首页 > 解决方案 > 导出组件价值的正确方法是什么？

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>

组件本身由带有value属性的主文本字段和可能的辅助元素组成。通过value直接输入或其他方式更改，然后useState()在组件内使用钩子保存。

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

我应该如何访问valuemain.js 中的 component.js 来验证和提交它？如果有多种方法，哪种方法最简单，哪种方法最好？

标签： javascriptreactjsnext.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>

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

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

推荐阅读