Question

我遇到了输入验证问题，该问题允许提交表单而不添加任何selectorValue。我所进行的检查似乎仅检查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是否为空，如果是的话，则将重点放在文本区域上。

要集中精力，我们需要先创建对文本区域的引用。

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

经过一番搜索……required道具仅用于装饰目的-将astrisk添加到字段标签。

它没有任何形式的验证。为此，您需要一个单独的解决方案-尝试formik或在Submit handler中设置一些条件。

具有yup验证模式的Formik plays nicely-适用于更复杂，动态的需求。

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

2 个答案: