在反應中動態操作dom元素？

Question

當用戶在 React 中單擊按鈕時，我試圖讓按鈕更改顏色。 我嘗試添加此功能的每個按鈕也在更新 state。 單擊這些按鈕時，如何與 styles 交互並更新 state？ 這是我的粗略嘗試：

一些 HTML：

<div className="searchPrivacyContainer">
            <p>USERS CAN SEARCH FOR MY PROJECT:</p>
            <div className="searchPrivacySelect">
              <div
                className="searchPrivacyYes"
                onClick={
                  (holdColor,
                  function () {
                    setProposal({ ...proposal, searchable: true });
                  })
                }
              >

這是我正在嘗試綁定的 function 的最基本版本。 希望編寫 function 的主體應該是簡單的部分，我只是不知道如何將它綁定到已經調用另一個 function 的 div：

const holdColor = (event) => {
    console.log(event.target.style);
  };

Answer 1

我認為這部分沒有按您的預期工作，

onClick = {
  (holdColor,
    function() {
      setProposal({ ...proposal,
        searchable: true
      });
    })
}

簡單的測試，

 function x(ev){console.log('x', ev)} function y(ev){console.log('y', ev)} const listener = (x, y) listener(123)

看，第一個（ x ）從未被調用，所以，你可能想對你的聽眾做這樣的事情。

onClick={(ev) => {
  holdColor(ev)

  setProposal({ ...proposal,
    searchable: true
  });
}}

編輯：查看這個工作示例（它可能會有所幫助）， https://codesandbox.io/s/eloquent-wilson-drbbk?fontsize=14&hidenavigation=1&theme=dark