Ant-Design 标签无法与我的 Javascript 逻辑一起正常工作

Question

我在我的 React 项目中使用 Ant-design，所以我在我自己的项目中使用他们给出的标签 Tags

这是我的代码

父组件

export default function FormSection() {
  const tagsData = ['1','2 ','3']
  const tagsData1 = ['a','b ','c']
  const getValueofTag = value => {
     console.log(value)
  }

  return (
    <div className="form-section">
      <form>
     
        <div className="selectable-tags-mortgage">
          {tagsData.map(tag => (
            <CheckableAntTag tag={tag} getValueofTag={getValueofTag} />
          ))}
        </div>

        <div className="selectable-tags-holders">
          {tagsData1.map(tag => (
            <CheckableAntTag tag={tag} getValueofTag={getValueofTag} />
          ))}
        </div>
       
      </form>
    </div>
  )
}

CheckableAntTag 是一个子组件，因为我想让这个组件可重用，所以我把它做成了一个单独的组件

子组件

从 'react' 导入 React, { useState, useEffect } 从“antd”导入{标签} 从 'prop-types' 导入 PropTypes

export default function CheckableAntTag({ tag, getValueofTag }) {
  const [selectedTags, setSelectedTags] = useState('')
  const { CheckableTag } = Tag
  const handleChange1 = (tag, checked) => {
    const nextSelectedTags = checked ? [tag] : selectedTags.filter(t => t !== tag)
    setSelectedTags(nextSelectedTags)
    getValueofTag(nextSelectedTags)
  }
  return (
    <CheckableTag
      style={{
        backgroundColor: selectedTags.indexOf(tag) > -1 ? 'red' : 'orange'
      }}
      key={tag}
      checked={selectedTags.indexOf(tag) > -1 ? true : false}
      onChange={checked => handleChange1(tag, checked)}>
      {tag}
    </CheckableTag>
  )
}

CheckableAntTag.propTypes = {
  tag: PropTypes.object,
  getValueofTag: PropTypes.func
}

使用这个逻辑，我面临的问题是，当我点击标签时，值被设置为状态并且背景颜色发生变化，然后当我点击其他标签时，值确实被设置为状态（替换上一个），但背景颜色仍然保持不变。

请参阅下面的屏幕截图以更清楚地了解我面临的问题

在截图中你可以看到首先我点击“a”状态进入[“a”]，然后当我点击“c”状态设置为“c”但此时“a”也被突出显示不应该是这样的

Answer 1

您需要在父组件中而不是在可重用组件中包含状态逻辑，除非您将其设为列表生成器组件，如果您一次只需要一个标签，则无需将其存储在数组中，只需使用字符串.你可以自己找出其余的改进

const tagsData = ["1", "2 ", "3"];
const tagsData1 = ["a", "b ", "c"];

export default function FormSection() {
  const [selectedMortgageTag, setSelectedMortgageTag] = useState("");
  const [selectedHolderTag, setSelectedHolderTag] = useState("");

  return (
    <div className="form-section">
      <form>
        <div className="selectable-tags-mortgage">
          {tagsData.map((tag) => (
            <CheckableAntTag
              tag={tag}
              setValue={setSelectedMortgageTag}
              value={selectedMortgageTag}
            />
          ))}
        </div>

        <div className="selectable-tags-holders">
          {tagsData1.map((tag) => (
            <CheckableAntTag
              tag={tag}
              setValue={setSelectedHolderTag}
              value={selectedHolderTag}
            />
          ))}
        </div>
      </form>
    </div>
  );
}

const { CheckableTag } = Tag;

function CheckableAntTag({ tag, value, setValue }) {
  return (
    <CheckableTag
      style={{
        backgroundColor: tag === value ? "red" : "orange"
      }}
      key={tag}
      checked={tag === value}
      onClick={() => setValue(tag)}
    >
      {tag}
    </CheckableTag>
  );
}

CheckableAntTag.propTypes = {
  tag: PropTypes.object,
  value: PropTypes.string,
  setValue: PropTypes.func
};