Question

基本React Web应用程序

应用程序：

使用onMouseEnter和onMouseLeave呈现悬停按钮的联系方式。

问题：

无法更改悬停状态

插件：

如何在Team const中将悬停状态从true更改为false？我是新来的人。

我了解更改状态的简单方法，但这对我来说有点复杂。

const Team = [
  {
    Position: "Symposium General Chair",
    Group: [
      {
        Name: ["DUmmy nam"],
        Contact: ["222222222222"],
        Hover: false
      }
    ]
  },
  {
    Position: "Symposium Chairs",
    Group: [
      {
        Name: ["DUmmy namexx"],
        Contact: ["33333333333"],
        Hover: false
      },
      {
        Name: ["DUmmy namexxcxzczx"],
        Contact: ["2222222222"],
        Hover: false
      },
      {
        Name: ["DUmmy namexca"],
        Contact: ["11111111111"],
        Hover: false
      }
    ]
  }
];

//Not important but to split the array into 2
function chunkArray(myArray, chunk_size) {
  var index = 0;
  var arrayLength = myArray.length;
  var tempArray = [];

  for (index = 0; index < arrayLength; index += chunk_size) {
    let myChunk = myArray.slice(index, index + chunk_size);
    tempArray.push(myChunk);
  }

  return tempArray;
}

//Extracted focus code here
    {chunkArray(Team, 2).map((col, i) => (
                <div className="row" key={i}>
                  {col.map(_Team => (
                    <div key={_Team.Position} className="w-50 ">
                      <h5>
                        <span className="badge badge-pill badge-info col-sm ">
                          {_Team.Position}
                        </span>
                      </h5>
                      {_Team.Group.map(_Group => (
                        <h6 key={_Group.Name} className="col-sm ">
                          {_Group.Name}

                          {!_Group.Hover ? (
                            <button
                              type="button"
                              className="btn close"

          //Problem is here how do I change the hover state to true?
                              onMouseEnter={_Group.Hover.setState(
                                (Hover = true)
                              )}

         //Problem is here how do I change the hover to false?
                              onMouseLeave={_Group.Hover.setState(
                                (Hover = false)
                              )}
                            >
                              O
                            </button>
                          ) : (
                            <div style={letterStyle} className="close">
                              {_Group.Contact}
                            </div>
                          )}
                        </h6>
                      ))}
                    </div>
                  ))}
                </div>
              ))}

Answer 1

我认为您有点不喜欢使用React。 JSON结构非常令人困惑，我不确定您要做什么，但是请看下面的CodeSandbox，因为我认为您应该像这样利用setState更新程序：

  handleOnMouseEnter(teamIndex, groupIndex) {
    console.log("entering teamIndex/groupIndex: ", teamIndex, groupIndex);
    this.setState(state => {
      state.teams[teamIndex].Group[groupIndex].Hover = true;
      return state;
    });
  }

我认为我整理的代码片段应该更好地向您展示如何正确地使用React进行尝试：

https://codesandbox.io/s/7wlx56j3r1

在const的列表列表中反应设置状态而不是状态

1 个答案: