Question

我有一个用于创建标签的输入。

我使用文本输入字段。用户首先键入一些字符。然后，如果它们按下Enter键或Space键（标签中不能包含空格），则字段中的当前值将存储在一个数组中，并呈现为用户可以看到的小块。一旦将值存储在数组中，文本字段就会被删除。

我曾经使用React中的受控组件，将值存储在本地状态。我有两个函数，一个会触发onChange并检查最后一个输入到该字段中的字符以查看它是否为空格，另一个函数会在按下key键时触发并检查用户是否按回车/返回键。

由于其他原因，我需要切换到React Final Form。我已经或多或少成功地转换了其余代码，除了这个家伙。

我不知道如何重置输入的值。我已经阅读了文档，并且空着。我在网上搜索，一无所获。许多例子比我想要的或做我不关心的事情要复杂得多。

到目前为止，我已经能够对其进行设置，以便我的onKeyDown可以同时检查空格和返回/输入，在这种情况下，它将启动另一个函数来创建新标签。我将标签数组存储在React Final Form之外的本地状态中，因为还没有找到其他方法。

我看到了库final-form-set-field-data，但是没有使用React来实现它的示例。

这是我代码相关部分的代码片段。我包括了我正在使用的原始逻辑（在最终形式之前），并对onKeyDown进行了修改以处理空格。

class FormWithTags extends React.Component {
  handleTagChange(e) {
    const { value } = e.target;
    const lastIndex = value.length - 1;
    const spaceRegex = /\s/;
    const alphanumRegex = /^\w*$/;

    if (spaceRegex.test(value[lastIndex]) && value.length > 1) {
      this.handleNewTag(value.slice(0, lastIndex).toLowerCase());
    } else if (alphanumRegex.test(value)) {
      this.setState({
          tagText: value
      });
    }
  }

  handleTagKeyDown(e) {
    if (
      (e.keyCode === 13 || e.keyCode === 32) &&
      e.target.value.length > 0
    ) {
      e.preventDefault();
      this.handleNewTag(e.target.value.toLowerCase());
    }
  }

  handleNewTag(value) {
    const { tagList } = this.state;

    const newTagList = addNewTag(tagList, value, value);

    if (newTagList !== tagList) {
      this.setState({
        tagText: '',
        tagList: newTagList
      });
    }
  }

  render() {
    return (
      <Form
        onSubmit={this.onSubmit}
        render={({ handleSubmit, pristine, invalid }) => (
          <form
              id="data-form"
              onSubmit={handleSubmit}
          >
            <Field
              component="input"
              type="text"
              name="tags"
              onKeyDown={e => this.handleTagKeyDown(e)}
            />
            <div className="upload-tags">
              <span className="upload-tags-spacer" />
              <TagList
                button
                listClass="upload-tags-list"
                tagClass="upload-tags-item"
                tagList={tagList}
                tagAction={this.removeTag}
              />
            </div>
          </form>
        )}
      />
    );
  }
}

我确定我只是不正确地理解某些内容。任何帮助将不胜感激！

如何根据特殊条件在React Final Form中更改表单值？

0 个答案: