如何清除反應標簽輸入字段？

Question

在react-tag-autocomplete lib 中，需要添加手動建議。 因此，我為建議列表創建了名為ReactTagsSuggestions的新組件。

如何清除ReactTags的輸入字段

<ReactTags
  id="form-share"
  tags={selectedTags}
  // suggestions={tagSuggestions}
  handleAddition={this.props.handleAddition}
  handleDelete={this.props.handleDelete}
  placeholder={this.props.tags.length ? '' : tr('Share with users, groups, and channels')}
  tagComponent={this.selectedTags}
  handleInputChange={this.handleInputChange}
  autofocus={false}
/>
<ReactTagsSuggestions
  suggestionList={tagSuggestions}
  showSuggestions={tagSuggestions.length > 0}
  checkToShare={this.props.checkToShare}
/>

Answer 1

如果你創建一個這樣的函數怎么樣

handleDelete = () => {
  this.setState({ tags: [] })
}

並將其傳遞給 ReactTags 組件

<ReactTags
.
.
handleDelete={ this.handleDelete }
/>

?

Answer 2

要清理ReactTags的輸入字段，您可以將selectedTags重置為空數組：

clearTag() {
  this.setState({ selectedTags: [] });
}

// Call the clearTag somwhere in your app
<button type="button" onClick={this.clearTag}>Clear tags</button>

示例： https : //codesandbox.io/s/react-tags-v9mft

Answer 3

為時已晚，但可能對其他人有用。 我認為你的意思是清除輸入值而不是標簽。 這是ReactTags的useState和inputValue道具的解決方案

const [inputValue, setInputValue] = useState('');

<ReactTags
    inputValue={inputValue}
    handleAddition={(...args) => {
        myHandleAddition(args);
        setInputValue('');
    }}
    handleInputChange={(tag) => {
        if (tag.slice(-1) === ' ') {
            myHandleAddition([{ id: tag, text: tag }]);
            setInputValue('');
        } else {
            setInputValue(tag);
        }
    }}
/>