React JS：确保以编程方式创建的输入字段彼此唯一

Question

我正在创建一个表单，通过首先将它们映射到带有标签和数字输入的表单组来为锦标赛提供不同数量的团队种子。在表单被视为有效之前，如何才能使每个字段都必须是唯一的？所谓唯一，我的意思是每个字段都取一定范围内的某个数字，比如说，如果一场锦标赛有 14 支球队，那么每个字段应该是 1 到 14 之间的数字，但两个字段不应该能够取相同的数字。renderButton() {            return (                <Form onSubmit={this.handleSeedingSubmit}>                    {this.state.teams.map((team)=>                        <FormGroup key={team.name}>                            <Form.Label >{team.name}</Form.Label>                            <Form.Control type = "number" name={team.name} min={1} max={this.state.tournament.noTeams} onChange={this.onChangeHandler} required />                        </FormGroup>                    )}                    <Button type="submit" >                       Submit                    </Button>                </Form>            );        }提交后，每个团队都将被映射为{name, Seeding}。我希望每支球队都有一个独特的种子队，因为稍后他们将根据种子队被分类到池中。

Answer 1

那么你可以做的是通过将数字输入存储在商店中来控制它们的值：

state = {

  // other state,

  inputs: {}

}

然后onChangeHandler设置状态中每个输入的值：

function onChangeHandler(e) {

  const { name, value } = e.target;

  this.setState({

    inputs: {

      ...this.state.inputs,

      [name]: value

    }

  })

}

然后，当提交表单时，您可以添加检查以查看值是否唯一，有很多方法可以做到这一点，我在这里所做的是从数组中删除重复项，然后检查数组的长度反对这样的状态的价值观：

function handleSeedingSubmit(e) {

  e.preventDefault();

  const { inputs } = this.state;

  const valuesInState = Object.values(input);

  const uniqueValuesArr = [...new Set(valuesInState)];

  const areInputsValid = valuesInState.length === uniqueValuesArr.length;

  if (!areInputsValid) {

    // set Error here

    return;

  }

  // Hurray!! Inputs are valid

  // Handle Success case here

}

希望能帮助到你 ：）