Question

我制作了一个简单的React应用。我有一个带有字段的React表单。而且我们可以动态地添加越来越多的相同字段。并一起提交。

也许我可以使用一段时间？但是如何？而且我必须在表单中动态添加字段名称，并动态将字段添加到对象以进行提交。

PyCompilerFlags

Answer 1

您可以映射一系列对象：

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} />)
        })
    }

如何在React上动态添加字段到表单

1 个答案: