Javascript 如何在React上向窗体动态添加字段

我制作了一个简单的react应用程序。 我和field有一个反应表。 我们可以动态添加越来越多的相同字段。并一起提交

也许我可以用一段时间？但是怎么做呢？ 我必须在表单中动态地添加字段名称，并将字段动态地添加到对象以供提交

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            task: '',
            count: [1]
        };
        this.addTask = this.addTask.bind(this);
        this.change = this.change.bind(this);
    }

    render() {
        return (
            <div>
                <h1>Form</h1>
                <form onSubmit = {this.onSubmit} method='post'>
                    <div>
                        {this.state.count.map((item, index) => {
                            return (
                                <div key={index}>
                                    <input type='text' value={this.state.task} name='task' onChange={this.change} />
                                </div>
                            )
                        })}
                    </div>

                    <button onClick={this.addTask}>addTask</button>
                    <button>submit</button>
                </form>
            </div>
        );
    }

    addTask(e) {
        e.preventDefault();
        this.setState({
            count: [...this.state.count, '1']
        })
    }

    onSubmit = (e) => {
        e.preventDefault();
        const {submit} = this.props;
        submit({
            task: this.state.task
        });

        this.setState({
            task: ''
        })
    };

    change(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }
}

export default connect(null, { submit })(Form);

类表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：“”，
计数：[1]
};
this.addTask=this.addTask.bind（this）；
this.change=this.change.bind（this）；
}
render（）{
返回(
形式
{this.state.count.map（（项，索引）=>{
返回(
)
})}
添加任务
提交
);
}
添加任务（e）{
e、 预防默认值（）；
这是我的国家({
计数：[…this.state.count，'1']
})
}
onSubmit=（e）=>{
e、 预防默认值（）；
const{submit}=this.props；
提交({
任务：this.state.task
});
这是我的国家({
任务：“”
})
};
变化（事件）{
const target=event.target；
const value=target.type=='checkbox'？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
}
导出默认连接（null，{submit}）（表单）；

您可以通过对象数组进行映射：

constructor(props) {
        super(props);
        this.state = {
            task: '',
            count: [1],
            components: []
        };
        this.addTask = this.addTask.bind(this);
        this.change = this.change.bind(this);
    }

    render() {
        return (
            <div>
                <h1>Form</h1>
                <form onSubmit = {this.onSubmit} method='post'>
                    <div>
                        {this.state.count.map((item, index) => {
                            return (
                                <div key={index}>
                                    {this.state.components.map(comp => comp)}
                                </div>
                            )
                        })}
                    </div>

                    <button onClick={this.addTask}>addTask</button>
                    <button>submit</button>
                </form>
            </div>
        );
    }

    addTask(e) {
        e.preventDefault();
        this.setState({
            count: [...this.state.count, '1'],
            components: this.state.components.concat(<input type='text' value={this.state.task} name='task' onChange={this.change} key={this.state.count.length + 1} />)
        })
    }

构造函数（道具）{
超级（道具）；
此.state={
任务：“”，
计数：[1]，
组成部分：[]
};
this.addTask=this.addTask.bind（this）；
this.change=this.change.bind（this）；
}
render（）{
返回(
形式
{this.state.count.map（（项，索引）=>{
返回(
{this.state.components.map（comp=>comp）}
)
})}
添加任务
提交
);
}
添加任务（e）{
e、 预防默认值（）；
这是我的国家({
计数：[…this.state.count，'1']，
组件：this.state.components.concat（）
})
}

您需要更具体地说明哪些工作方式不符合您的要求。