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

Question

我做了一个简单的反应应用程序 我有一个带有字段的React表单。 我们可以动态添加越来越多的相同字段。 并将它们一起提交。

也许我可以使用或同时使用？ 但是怎么样？ 我必须在表单中添加动态字段名称，并动态字段到对象进行提交。

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);

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