如何在reactjs中的数组中添加筹码值

Chips are compact elements that represent an input, attribute, or action.

筹码是表示输入，属性或动作的紧凑元素。

An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. Note that since no onClick property is defined, the Chip can be focused, but does not gain depth while clicked or touched.

从值数组呈现多个Chip的示例。 删除芯片会将其从阵列中删除。 请注意，由于未定义onClick属性，因此可以使Chip聚焦，但在单击或触摸时不会增加深度。

There are some basic steps to implement chips in ReactJs.

在ReactJs中实现芯片有一些基本步骤。

步骤1：通过以下命令安装“ material-ui-chip-input” 。 (Step 1:- Install “material-ui-chip-input” through the following command.)

$ npm i --save material-ui-chip-input@next

步骤2：在您的组件文件中导入“ material-ui-chip-input” 。 (Step 2:- Import “material-ui-chip-input” in your component file.)

import ChipInput from "material-ui-chip-input";

步骤3：-定义状态 (Step 3:- Define state)

constructor(props) { super(props); this.state = { tags: [] };

步骤4：-定义添加和删除芯片的功能 (Step 4:- Define functions for adding and deleting chips)

// Add ChipshandleAddChip = (chip) => { this.setState({ tags: [...this.state.tags, chip] }); }// Delete ChipshandleDeleteChip = (chip) => { this.setState({ tags: _.without(this.state.tags, chip) }); }

In this function, I am using the underscore library for delete value from the array you can use any other or basic javascript function.

在此函数中，我使用underscore库从数组中删除值，您可以使用任何其他或基本的javascript函数。

步骤5：-在组件中使用ChipInput (Step 5:- Use ChipInput in the component)

<ChipInput label="Video Tags" value={this.state.tags} onAdd={(chip) => this.handleAddChip(chip)} onDelete={(chip, index) => this.handleDeleteChip(chip, index)}/>

例：- (Example:-)

Demo 演示版 Inspect State 检查状态

That’s it for this time! I hope you enjoyed this post. As always, I welcome questions, notes, comments and requests for posts on topics you’d like to read. See you next time! Happy Coding !!!!!!

这次就是这样！ 希望您喜欢这篇文章。 与往常一样，我欢迎您提出关于您要阅读的主题的问题，注释，评论和帖子请求。 下次见！ 快乐编码!!!!!!

翻译自: https://medium.com/@rajputankit22/how-to-add-chips-value-in-an-array-in-reactjs-135c1c9956d4