点击标签给文本域（Textarea）赋值，文本域支持手动输入

最新推荐文章于 2023-09-04 15:35:28 发布

原创最新推荐文章于 2023-09-04 15:35:28 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #react.js

这段代码展示了如何在状态中设置和处理评价内容，包括切换标签的高亮、合并选中的标签和文本，并更新文本区域的值。处理过程中，通过正则表达式移除了已选标签在内容中的重复出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：状态中设置两个变量

state: {
    content: "", // 该值作为Textarea的value
    content2: "",
}

第二步：点击评价标签执行方法

 // 设置详细评价
  handleRate = idx => {
    const { tagList, content, content2 } = this.state;
    const cyTagList = tagList.slice();
    const select_tagList = [];
    let cyContent = content;

    cyTagList[idx].active = !cyTagList[idx].active; // 高亮tag

    tagList.forEach(item => {
      if (item.active) {
        select_tagList.push(`#${item.name}`); // 添加选中的tag名称
      }
    });

    // 正则去除重复tag
    var reg1 = new RegExp("#服务热情", "g");
    var reg2 = new RegExp("#环境舒适", "g");
    var reg3 = new RegExp("#效率快", "g");
    var reg4 = new RegExp("#技术高", "g");
    var reg5 = new RegExp("#体验完美", "g");
    cyContent = cyContent.replace(reg1, "");
    cyContent = cyContent.replace(reg2, "");
    cyContent = cyContent.replace(reg3, "");
    cyContent = cyContent.replace(reg4, "");
    cyContent = cyContent.replace(reg5, "");
    cyContent = cyContent.replace(/\s*/g, "");

    this.setState({
      tagList: cyTagList,
      content: content.length
        ? `${select_tagList.join(" ")} ${cyContent}`
        : `${select_tagList.join(" ")} ${content2}`  // 设置文本域的值
    });
  };