输入验证 - 没有任何值的反应表单提交

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

在你的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是否为空，如果是，请关注文本区域。

为了集中注意力，我们需要首先为我们的文本区域创建一个引用。

创建要成为的引用附加到 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} />

Answer 2

经过一番搜索... required道具仅用于装饰目的 - 为字段标签添加星号。

它没有任何形式验证。您需要一个单独的解决方案 - 尝试 formik 或在提交处理程序中设置一些条件。

Formik 可以很好地与验证模式配合yup - 适用于更复杂的动态需求。