从映射的 forms 通过 reac 中的 e.target 获取值

Question

I am displaying multiple forms by mapping in react, and submit button is in parent component, how to getvalues of all the forms which are mapped on form submit?

below is my code for parent component:

<form>
     {rowdata.map((item, index) => <ChildForm key={index} {...this.state} />)}
     <Button type="submit" className="primarybtn btnsmall"/>
         </form>    

Answer 1

Put the entire form inside a the component and simply map the component with the form and button inside of it.

Just pass props down.

Parent Component.

return (
{someArray.map(form => (
     <SomeForm onSubmit={this.formSubmitHandler} key={form.key} />

)}

Child Component.

import React from 'react;

function SomeForm(props) {
return (
<div>
 <form onSubmit={props.onSubmitHandler}>
   Your Form Here
   <Button type="submit" className="primarybtn btnsmall"/>
</form>
 )}

Answer 2

Why are you using forms inside of forms. Maybe you should use different input modes and a single button to submit the input values. For getting the values you can construct a array of objects( one object for one Iteration the map function)