Реагируйте JS: убедитесь, что поля ввода, созданные Progratimacally, уникальны

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
}

Надеюсь, это поможет:)