Как скрыть кнопку до тех пор, пока все поля не будут заполнены реагировать с крючками

Question

У меня есть форма в реакции, как скрыть кнопку отправки, пока все поля не будут иметь значения? Поле формы:

        <Form>
        <Form.Group controlId="textField">
          <Form.Control onChange={handleTextValueInput} value={textValue} />
        </Form.Group>

Кнопка:

          <ButtonToolbar> 
            <Button onClick={doSomething}  variant="secondary" size="sm">
              Submit field
            </Button>
          </ButtonToolbar>

Answer 1

Вы можете условно отобразить вашей кнопки, используя оператор &&, основываясь на textValue. Читайте официальную документацию о реагировании, чтобы узнать, как работает условный рендеринг.

Выполнение textValue && <>...</> отобразит его, если textValue не ложно, т. Е. Не пусто, или пустая строка.

<ButtonToolbar> 
  {textValue &&
    <Button onClick={doSomething} variant="secondary" size="sm"> Submit field 
    </Button>
  }
</ButtonToolbar>

Если вам нужно проверить более 1 поля, вам нужно соединить оператор &&.

Answer 2

Я не уверен, что это то, что вы хотите, но вот решение:

<ButtonToolbar> 
  {textValue.length > 0 &&
    <Button onClick={doSomething} variant="secondary" size="sm"> Submit field 
    </Button>
  }
</ButtonToolbar>