如何在陣列中查找不匹配的數字？

這是 Reactjs 中的數字記憶游戲

第一個數字隨機出現。例如：123。

第二個數字是我要輸入的：123。

那是對的。

所以如果我輸入錯誤，例如124，那么4應該被劃掉。

輸出應該是這樣的：

<div>
  <span>1</span>
  <span>2</span>
  <span className="wrong">4</span>
</div>

更多示例：

亂數：4573

輸入：4674

輸出：4 6 7 4

亂數：4573

輸入：4674761

輸出：4 6 7 4 7 6 1

亂數：123

輸入：123456

輸出：123 456

uj5u.com熱心網友回復：

假設您將兩個條目作為陣列傳遞給組件，并且假設array_1是原始條目和array_2第二個條目，那么您要做的就是

function App({ array_1, array_2 }) {
  return (
    <div>
      {array_2.map((val, i) => {
        if (val === array_1[i]) {
          return <span>{val}</span>;
        }
        return <span className="wrong">{val}</span>;
      })}
    </div>
  );
}

uj5u.com熱心網友回復：

從您的示例中，我假設這些數字也應該位于正確的位置。

由于您沒有提供用戶輸入短于亂數的示例，因此我假設在這種情況下此類選項不存在或您正在以其他方式處理它。

現在我的假設已經定義，您可以通過將用戶輸入數字轉換為字串并一個一個比較符號來迭代用戶輸入數字來完成此操作。您需要檢查位置 i 處的符號是否在兩個數字中相等 (input[i] === random_num[i])，只是不要忘記在迭代輸入時，您可以將 i 增加到超過 random_num 的長度，您應該檢查這些情況并將每個 input[i] 標記為錯誤，其中 i > random_num.length

uj5u.com熱心網友回復：

這是我的嘗試

class NumberMemoryGame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', answer: '123456'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
        <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Guess:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <div>
          {[...this.state.value].map((char, i) => (
          <span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
           {char}
          </span>))}
        </div>
      </div>
    );
  }
}

你可以在這里找到 JS Fiddle 。

uj5u.com熱心網友回復：

注意：Vanilla JavaScript 解決方案。

我想你可以使用這樣的東西：

• 突出顯示所有與字串不匹配的元素。

const input = document.getElementById("data");
const results = document.getElementById("results");

function check() {
  results.innerHTML = "";
  let message = ``;
  let random = String(getRandom()).split("");
  if (random === input.value) {
    console.log("Win");
  } else {
    if (random.length >= input.value) {
      random.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== input.value[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    } else {
      let inputValue = input.value.split("");
      inputValue.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== random[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    }
  }
}

function getRandom() {
  return Math.floor(Math.random() * 1000);
}

.wrong {
  background: red;
  color: #fff;
}

<input type="number" id="data">
<button onClick="check()">SUBMIT</button>

<div id="results"></div>

作業小提琴

標籤：

上一篇：當我滾動到螢屏的一半時，我希望我的React組件加載更多資料

下一篇：在ReactNative中陷入功能組件轉換的課堂