1

我想知道是否可以得到一些帮助，我目前正在尝试重新学习 ReactJS，我正在做这个任务，这是一个可以帮助孩子们学习时间表的小应用程序。当用户单击网格中的数字时，该数字的所有倍数都会改变颜色/做某事。我目前有以下内容，但如果可能的话，我真的很感激最后一点的帮助：
我有数字映射到网格，
我有一个函数可以从我拥有的数字数组中找到你通过的任何数字的倍数通过传递，
但是我正在努力让两者相互合作，目前我拥有用户在单击网格上的数字时选择的数字的值，但我似乎无法在multipleFinder函数作为参数，它甚至不将其识别为第二个参数。我尝试将整个功能移动到功能组件中MapThis，但我不断收到错误
TypeError: Cannot read property 'length' of undefined
或
TypeError: Cannot read property '0' of undefined
我已经尝试移动它并更改代码，但我似乎一直收到相同的错误或没有太多响应，我已经尝试让它工作好几天了，我认为它可以可能是循环错误？/ 试图在功能组件中使用它。我不确定我是否只是在努力实现目标的错误道路，但任何帮助将不胜感激！谢谢！:)

目前我的组件文件中的所有内容：

import './NumberGridStyles.css';

// Get all the numbers from 1 - 144
let numbersStart = 1;
let numbersEnd = 144;
let allNumbers = Array(numbersEnd - numbersStart + 1)
    .fill()
    .map(() => numbersStart++);

function MultipleFinder(allthenumbers, multipleno) {
    var multiples = [allNumbers];
    for (var i = 0; i < allthenumbers.length; i++) {
        if (allthenumbers[i] % multipleno === 0) {
            multiples.push(allthenumbers[i]);
        }
    }
    return multiples;
}
// return MultipleFinder();
console.log(MultipleFinder(allNumbers, 20));


// Map all 1 - 144 numbers to the grid
export const MapThis = () => {

    function showTheMultiples(allNumbers) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, 6);
        console.log(MultipleFinder(allNumbers, 10))
    }
    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(allNumbers => (
                    <div className="box" key={allNumbers.toString()} onClick={() => showTheMultiples(allNumbers)}>
                        {allNumbers}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

CSS 文件：

body {
    margin: 40px;
  }

  .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
  }

  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
  }

基于您传递的第二个参数的网格和数字数组的屏幕截图

4

1 回答 1

0

我只是将 var 内部的名称更改allnumbers.map为number并将 map 内部的所有出现都更改为它；并且，将功能更改showTheMultiples为实际显示所有数字列表和多个数字列表，并且它可以工作。

export const MapThis = () => {

    function showTheMultiples(number) {
        console.log(allNumbers);
        MultipleFinder(allNumbers, number);
        console.log(MultipleFinder(allNumbers, number))
    }

    return (
        <div>
            <div className="wrapper">
                {allNumbers.map(number => (
                    <div className="box" key={number.toString()} onClick={() => showTheMultiples(number)}>
                        {number}
                    </div>
                ))}
            </div>
            <div>
            </div>
        </div>
    )
}

如果你想改变多个元素的样式，你可以添加一个状态来保存多个元素的列表和一个获取 allNumbers var 和 multipleNumbers (state var) 的 renderList 函数。因此，对于 allNumers 列表中的每个项目，您可以验证它是否在 multipleNumbers 内，如果是真的，将样式更改为“多个”或类似的东西，如果没有将样式更改为“框”。

如果你想要一个代码示例

当用户单击网格中的数字时，该数字的所有倍数都会改变颜色/做某事

...试试这个链接。这是一个解决了您的问题的沙盒。

于 2020-03-04T18:10:47.890 回答