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
};

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

Ant-Design tags not working properly with my Javascript logic

javascript

reactjs

antd