0

在我的项目中，我使用react-native-tags从用户那里获取不同的颜色变体。

这是代码：

<View style={{ marginVertical: 10, marginLeft: 20, justifyContent: 'center' }}>
    <MText size={18}>Colors</MText>
</View>
<Tags
    initialText=""
    textInputProps={{
        placeholder: "Enter Color",
        blurOnSubmit:false
    }}
    initialTags={this.state.colors}
    createTagOnString={[","]}
    createTagOnReturn={true}
    onChangeTags={(tags) => {
        this.setState((prevState) => ({
            colors: tags
        }), () => this.handleVariantChanges());
    }}
    onTagPress={(index, tagLabel, event, deleted) => console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted")
    }
    containerStyle={styles.tagContainer}
    inputStyle={{ backgroundColor: "white" }}
    renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
        <TouchableOpacity style={styles.tag} onPress={onPress} key={index.toString()}>
            <Icon name="times" color="#aaa" />
            <MText>{' '}{tag}</MText>
        </TouchableOpacity>
    )}
/>

现在，在运行项目后，我添加了一些标签。标签添加成功。然后我继续添加另一个标签，但拼写不正确，所以我删除了第一个字符，但以前的标签也自动删除了。

另一个问题是，如果我想在添加一些标签后删除标签，我无法删除该标签。

这是问题 gif：

在此处输入图像描述

请帮助我这里出了什么问题！

注意： 仅当我将状态值用作initialTags. 如果我保持initialTags空白数组，那么一切正常。

4

1 回答 1

1

问题是 react 和 react native 标签是如何工作的。假设您有两个标签并且您正在输入文本。当您按退格键删除还不是标签的文本的第一个字符时，它会自动从数组中弹出第二个标签。由于您正在设置状态，因此将重新渲染组件并完全删除标签。

您可以通过使用 shouldComponentUpdate 并返回 false 来解决此问题

shouldComponentUpdate(nextProps, nextState) {
   return false;
 }

我建议为标签设置一个单独的组件，并在您的表单中使用它，并在触发 onChangeTags 时有一个更新表单的回调。

于 2019-07-15T12:02:58.303 回答