在反应中动态操作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