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

Question

我有一个输入验证问题，允许表单提交而不添加任何selectorValues。我的检查似乎只检查textarea内的输入，但没有考虑按下的添加按钮。

这是一个重现这个问题的sandbox。

我正在使用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是否为空，如果是，请关注textarea。

为了集中注意力，我们需要首先为我们的textarea创建一个ref。

创建一个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} />

Answer 2

经过一番搜索... qazxsw poi prop仅用于装饰目的 - 在字段标签上添加星号。

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

Formik formik plays与nicely验证模式 - 适用于更复杂，动态的要求。