第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

單擊時(shí)如何在 <td> 中插入組件

單擊時(shí)如何在 <td> 中插入組件

四季花海 2023-05-25 16:34:44
我在 td 標(biāo)簽中插入 React 組件時(shí)遇到問題。該組件應(yīng)插入到被單擊的那個(gè) td 中。如您所見，每個(gè) td 都有用于checkPlayer函數(shù)的onClick事件偵聽器。此函數(shù)檢查符號狀態(tài)的值，并根據(jù)該值將 X 組件或 O 組件插入到該特定 td 中。你們能幫我如何渲染這樣的組件嗎？當(dāng)前的方法只寫[object object]我的目標(biāo)——輸出<td>{<X />}</td>X組件，O組件幾乎相同import React from 'react';//stylesimport './X.scss';function X(){    return(        <div className="X">            <p>X</p>        </div>    )}export default X;應(yīng)用程序.jsfunction App() {  const [sign,setSign] = useState(true)  function checkPlayer(e){    //1st player    if(sign === true){      e.target.innerHTML = <X />;            setSign(false);    }          //2nd player    if(sign === false){      e.target.innerText = <O />;      setSign(true);    }}App.js 的 HTML 部分  return (    <div className="App">      <div className="container">        <table>          <tbody>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>            <tr>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>              <td onClick={checkPlayer}></td>            </tr>          </tbody>        </table>      </div>    </div>  );}
查看完整描述

1 回答

?
LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

干得好。我玩過它，這應(yīng)該給你一個(gè)很好的方向。（注意：您需要使用 [...values] 創(chuàng)建一個(gè)新數(shù)組而不是引用舊數(shù)組，以便 UI 重新呈現(xiàn)）。


import React, {useState, useEffect} from 'react';

import logo from './logo.svg';

import './App.css';


function App() {

  const [sign,setSign] = useState(true);


  const [values, setValues] = useState([["", " ", " "],[" ", " ", " "],[" ", " ", " "]]);


  function updateValue(row, column){

      var newValue = [...values];

      newValue[row][column] = sign == true ? "X" : "O";

      setSign(!sign);

      setValues(newValue);

  }


  return (

      <div>

        <table>

          <tbody>

            <tr>

              <td onClick={() => updateValue(0,0)}>{values[0][0]}</td>

              <td onClick={() => updateValue(0,1)}>{values[0][1]}</td>

              <td onClick={() => updateValue(0,2)}>{values[0][2]}</td>

            </tr>


            <tr>

              <td onClick={() => updateValue(1,0)}>{values[1][0]}</td>

              <td onClick={() => updateValue(1,1)}>{values[1][1]}</td>

              <td onClick={() => updateValue(1,2)}>{values[1][2]}</td>

            </tr>


            <tr>

              <td onClick={() => updateValue(2,0)}>{values[2][0]}</td>

              <td onClick={() => updateValue(2,1)}>{values[2][1]}</td>

              <td onClick={() => updateValue(2,2)}>{values[2][2]}</td>

            </tr>

          </tbody>

        </table>

      </div>

  );

}


export default App;



查看完整回答
反對 回復(fù) 2023-05-25
  • 1 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號