根據當前物件顯示和隱藏組件

我有一個父組件，其中包含使用 map 方法Editor映射到另一個組件的物件陣列：Scene

function Editor() {
  const [URL, setURL] = useState();
  const [scenes, setScenes] = useState([]); 
const addScene = () => {
    const scene = {
      Id: Math.floor(Math.random() * 10000),
      JsonObj: canvas.getJsonObj(),
    };
    const cpScenes = [...scenes];
    cpScenes.push(scene);
    setScenes(cpScenes);
  };
  const removeScene = (scene) => {
    const cpScenes = scenes.filter((sc) => sc !== scene);
    setScenes(cpScenes);
  };
<div>
          {scenes.map((scene) => (
            <Scene
              key={Math.floor(Math.random() * 1000)}
              addText="scene #{f}id"
              onDelete={removeScene}
              value={scene}
              selected={true}
              length={scenes.length}
              switchScene={switchScene}
              saveCurrentScene={saveCurrent}
            />
          ))}
          <button onClick={addScene} className="btn btn-primary m-2">
            Add scene
          </button>
        </div>

場景組件：

function Scene(props) {
  const id = useState(_uniqueId("sceneCmpn-"));
  const { value, length, switchScene, onDelete, saveCurrentScene } = props;

  const [selected, setSelected] = useState(false);
  return (
    <div key={id}>
      <button
        id={id}
        onClick={() => {
          setSelected(true);
          switchScene(value);
        }}
      >
        Scene
      </button>
      {length > 1 && (
        <button onClick={() => onDelete(value)} className="btn btn-danger m-2">
          remove scene
        </button>
      )}
      {selected && (
        <button
          onClick={() => {
            saveCurrentScene(value);
          }}
          className="btn btn-success m-2"
        >
          Save
        </button>
      )}
    </div>
  );
}

我想save button在點擊時出現scene button，它確實有效，但是當我點擊另一個場景時，按鈕停留在那里。

如果我切換（“單擊”）場景，如何使green save button消失。

編輯：這是切換場景的代碼，我認為對于這個問題并不重要：

const switchScene = (scene) => {
    let cpScenes = [...scenes];
    const index = scenes.indexOf(scene);
    const cpJsonObj = cpScenes[index].JsonObj;
    //console.log("this object in switchScene", cpJsonObj);
    canvas.resetEditor();
    canvas.loadJson(cpJsonObj);
    canvas.exportImg();
  };
```

uj5u.com熱心網友回復：

在Editor組件中，您應該添加另一個狀態來檢查選定的場景。

const [selectedScene, setSelectedScene] = useState(); 

功能switchScene可能是

const switchScene = (scene) => {
    let cpScenes = [...scenes];
    const index = scenes.indexOf(scene);
    const cpJsonObj = cpScenes[index].JsonObj;
    //console.log("this object in switchScene", cpJsonObj);
    canvas.resetEditor();
    canvas.loadJson(cpJsonObj);
    canvas.exportImg();
    setSelectedScene(scene); //set state change here
};

之后就可以修改fromselected的props了SceneEditor

{scenes.map((scene) => (
            <Scene
              key={Math.floor(Math.random() * 1000)}
              addText="scene #{f}id"
              onDelete={removeScene}
              value={scene}
              selected={selectedScene === scene}
              length={scenes.length}
              switchScene={switchScene}
              saveCurrentScene={saveCurrent}
            />
          ))}

從上述所有更改中，您需要將它們與Scene組件對齊

現在selected來自道具，不再來自狀態

function Scene(props) {
  const id = useState(_uniqueId("sceneCmpn-"));
  const { value, length, switchScene, onDelete, selected, saveCurrentScene } = props;

  return (
    <div key={id}>
      <button
        id={id}
        onClick={() => {
          switchScene(value);
        }}
      >
        Scene
      </button>
      {length > 1 && (
        <button onClick={() => onDelete(value)} className="btn btn-danger m-2">
          remove scene
        </button>
      )}
      {selected && (
        <button
          onClick={() => {
            saveCurrentScene(value);
          }}
          className="btn btn-success m-2"
        >
          Save
        </button>
      )}
    </div>
  );
}

標籤：javascript 反应 使用状态

上一篇：Firefox擴展DOM改變了奇怪的行為

下一篇：為什么是1 1？1:0 1回傳1而不是3？[復制]