提交具有相同字段名称的多个输入字段-ReactJs

Question

我有一个玩家表单，它接受多个玩家输入，并且在提交时，所有玩家都被添加到一个 mongodb 集合中。我不确定处理多个输入的最佳方法是什么。到目前为止，下面的代码只有一个玩家的输入。如果我想添加多个输入以添加最多 10 个玩家，每个输入字段是否需要具有唯一的名称？如果是这样，它将如何适合我的 addPlayerToTeam 函数？提前致谢！

export default class AddPlayersForm extends Component {
constructor(props) {
    super(props);
    this.submitForm = this.submitForm.bind(this);
}

submitForm(event) {
    event.preventDefault();

    this.props.addPlayerToTeam({
        firstName: event.target.firstName.value,
        lastName: event.target.lastName.value,
        email: event.target.email.value,
        height: event.target.height.value,


    })
}

render() {
    return (
        <div>
            <h2>Add players</h2>
            <h4>Must have a minimum of 5 players to complete registration</h4>
            <Table>
                <Form onSubmit={(event) => this.submitForm(event)}>
                    <FormGroup>
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Height</th>
                        </tr>
                        <InputGroup>
                        <tr>
                            <td><Input type="text" name="firstName" id="firstName" /></td>
                            <td><Input type="text" name="lastName" id="lastName" /></td>
                            <td><Input type="text" name="email" id="email" /></td>
                            <td><Input type="text" name="height" id="height" /></td>
                        </tr>
                        </InputGroup>

                    </thead>
                </FormGroup>
                </Form>
            </Table>

        </div>
    )
}

}

Answer 1

您好，我为您准备了一个示例。您可以根据您的要求使用它。仅供参考，我评论了 this.props.addPlayersToTeam(this.state.players);但是您可以取消注释并在父组件中实现 addPlayersToTeam 以将多个玩家保存在一起，因为我们在参数中传递了玩家。

import React from 'react';
import {Input} from "reactstrap";

export default class AddPlayersForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            players: [],
            currentPlayer: {
                firstName: '',
                lastName: '',
                email: '',
                height: ''
            }
        };
    }

    save = (event) => {
        event.preventDefault();
        console.log(JSON.stringify(this.state.players), 'players');
        // this.props.addPlayersToTeam(this.state.players);
    };

    onChange = (event) => {
        event.preventDefault();
        this.setState({currentPlayer: {...this.state.currentPlayer, [event.target.name]: event.target.value}});
    };
    addPlayer = (event) => {
        event.preventDefault();
        this.setState(state => {
            let found = state.players.find(p => p.firstName === state.currentPlayer.firstName && p.lastName === state.currentPlayer.lastName);
            if(!found) {
                return state.players.push(state.currentPlayer);
            }
        }, () => {
            console.log(this.state.players, 'players');
        });
    };

    render() {

        return (
            <div>
                <h2>Add players</h2>
                <h4>Must have a minimum of 5 players to complete registration</h4>
                <form>
                    <table>
                        <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>Height</th>
                        </tr>
                        <tr>
                            <td><Input onChange={this.onChange} type="text" name="firstName" id="firstName"/></td>
                            <td><Input onChange={this.onChange} type="text" name="lastName" id="lastName"/></td>
                            <td><Input onChange={this.onChange} type="text" name="email" id="email"/></td>
                            <td><Input onChange={this.onChange} type="text" name="height" id="height"/></td>
                        </tr>
                        </thead>
                    </table>
                    <button onClick={this.addPlayer}>Add Player</button>
                    <button onClick={this.save}>Save</button>
                </form>
            </div>
        )
    }
}