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

我不确定这是否就是您想要的，但这是一种解决方案：

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

Answer 2

您可以基于&&使用textValue运算符conditionally render来https://momentjs.com/timezone/。请仔细阅读正式的React文档，以了解条件渲染的工作原理。

如果textValue不虚假（即不为null或空字符串），则执行textValue && <>...</>将会呈现它。

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

如果您需要检查多个字段，则需要链接&&运算符。

如何隐藏按钮，直到所有字段都填充上钩子

2 个答案: