react & antd 把Form做成组件，点击按钮添加一个Form，如何获取循环出来的输入的字段

Question

在父组件中获取，子组件循环出来的多个短信模板手动输入内容
通过ref getFieldValue() 获取到的只有最后一个模板的输入内容

如何获取所有模板中手动输入的内容呢？（获取模板1 和 模板2手动输入的内容）

父组件

提交按钮点击事件 = ()=>{
  console.log(this.template.temp.getFieldValue())
}

render() {
        return (
            <div>
                <MessageTemplate ref={e=>this.template = e}></MessageTemplate>
            </div>
        )
    }

子组件

state = {
        comps: [1],
    }

addTemp = ()=>{
        this.setState({
            comps: this.state.comps.concat([Date.now()])
        })
    }

render() {
        const { comps } = this.state;
        return (
            <Fragment>
                {
                    comps.map((v, i) => {
                        return (
                            <Form
                                name={`basic${i}`}
                                key={v}
                                ref={e => this.temp = e}
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 17 }}
                                initialValues={{ remember: true }}
                                onFinish={this.onSubmit}
                                autoComplete="off"
                                labelAlign="left"
                                style={{ width: '570px' }}
                            >
                                <Form.Item
                                    label="短信内容"
                                    name="msg"
                                >
                                    <Input.TextArea />
                                </Form.Item>
                                <Button type="primary" onClick={() => { this.addTemp(i) }}>新增</Button>
                            </Form>
                        )
                    })
                }
            </Fragment>
        )
    }

Answer 1

在子组件的Form里循环ref名字加index就行了

然后父组件也是通过ref去取出子组件refName的值

例： comps.map((v, index) => {return ( <From ref={${refName}i}> ) })

Answer 2

props.children

https://zh-hans.reactjs.org/d...