删除标签文本的意外行为

Question

在我的项目中，我使用 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 保留为空白数组，那么一切正常。

Answer 1

问题在于反应和反应本机标记的工作方式。假设您有两个标签并且您正在输入文本。当您点击退格键删除还不是标签的文本的第一个字符时，它会自动从数组中弹出第二个标签。由于您正在设置状态，因此组件是 re-rendered 并且完全删除了标签。

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

shouldComponentUpdate(nextProps, nextState) {
   return false;
 }

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

删除标签文本的意外行为

Unexpected behaviour on removing tag's texts

reactjs

react-native

react-state