Question

我在状态中有两个数组，并且都有ID。

如果某个数组具有相同的值（在这种情况下为8），我想禁用所有具有该相等值的按钮。

按钮已经存在，我只想禁用具有相同非唯一ID的按钮。

我尝试过这样，但是我没有得到

var setOne = [2,6,8];
var setTwo = [3, 8, 4]

const button = () => {
var hasDuplicateValues = [...new Set(setOne)].filter(item => setTwo.includes(item));

if(hasDuplicateValues.length > 0) {
   <button disabled />
}
else {
    <button />
}
}

render(){
this.button()
}

此解决方案禁用了所有按钮，但我只想禁用具有相同ID的按钮。

谢谢

Answer 1

尚不清楚该组件在应用程序层次结构中的哪个位置，因此我尝试了一些猜测工作。事物的外观几乎就在那里。您只需要遍历按钮并创建它们。

function Button(props) {
  const { disabled, text } = props;
  return <button disabled={disabled}>{text}</button>;
}

// Buttons creates the buttons in the set
function Buttons() {

  const setOne = [2, 6, 8];
  const setTwo = [3, 8, 4];

  // Remove the duplicates from the combined sets
  const combined = [...new Set([...setOne, ...setTwo])];

  // Get your duplicate values
  const hasDuplicateValues = setOne.filter(item => setTwo.includes(item));
  
  // `map` over the combined buttons
  // If `hasDuplicateValues` includes the current button, disable it
  return combined.map((n) => (
    <Button
      text={n}
      disabled={hasDuplicateValues.includes(n) && 'disabled'}
    />
  ));

}

ReactDOM.render(<Buttons />, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>

比较两个数组，如果id相等则禁用单个元素

1 个答案: