Подтверждение ввода - реагировать на отправку формы без каких-либо значений

Question

У меня проблема с проверкой ввода, которая позволяет отправлять форму без добавления selectorValue. Похоже, что у меня есть проверка только для ввода внутри textarea, но она не учитывает нажатие кнопки «Добавить».

Вот песочница , воспроизводящая проблему.

Я использую Semantic-ui-react, поэтому мой <Form.Field /> выглядит так:

<Form.Field required>
  <label>Selector Values:</label>
  <TextArea
    type="text"
    placeholder="Enter selector values 1-by-1 or as a comma seperated list."
    value={this.state.selectorValue}
    onChange={this.handleSelectorValueChange}
    required={!this.state.selectorValues.length}
  />
  <Button positive fluid onClick={this.addSelectorValue}>
    Add
  </Button>
  <ul>
    {this.state.selectorValues.map((value, index) => {
      return (
        <Card>
          <Card.Content>
            {value}
            <Button
              size="mini"
              compact
              floated="right"
              basic
              color="red"
              onClick={this.removeSelectorValue.bind(this, index)}
            >
              X
            </Button>
          </Card.Content>
        </Card>
      );
    })}
  </ul>
</Form.Field>

Итак, в приведенном выше описании <TextArea> имеет обязательную опору: !this.state.selectorValues.length. Это только проверка ввода внутри textarea, он должен проверить, что значение было добавлено нажатием кнопки Add, прежде чем разрешить отправлять форму.

Answer 1

После некоторого поиска ... required prop предназначен только для декоративных целей - добавление astrisk к метке поля.

Ничто не может сформировать проверку.Для этого вам нужно отдельное решение - попробуйте formik или задайте какое-либо условие в обработчике отправки.

Formik воспроизводит красиво с проверкой yupсхема - подходит для более сложных, динамических требований.

Answer 2

В вашем addSelectorValue добавьте проверку, чтобы увидеть, если this.state.selectorValue не пусто, если это просто возврат, это предотвратит добавление пустых значений в selectorValues

addSelectorValue = e => {
    e.stopPropagation();
    e.preventDefault();

    if (!this.state.selectorValue) return;
    //continue if this.state.selectorValue has a value
};

Перед отправкой добавьтепроверьте, является ли this.selectorValues пустым, если это так, сосредоточьтесь на textarea.

Чтобы сосредоточиться, нам нужно сначала создать ссылку на нашу textarea.

Создать ref быть прикрепленным к элементу dom

textareaRef = React.createRef();

// will use our ref to focus the element
focusTextarea = () => {
  this.textareaRef.current.focus();
}

handleSubmit = () => {
  const { selectorValues } = this.state;
  if (!selectorValues.length) {
    // call our focusTextarea function when selectorValues is empty
    this.focusTextarea();
    return;
  }
  this.setState({ submittedSelectorValues: selectorValues });
};

// attach our ref to Textarea
<Textarea ref={this.textareaRef} />