时间戳

首页 > 解决方案 > 如何以正确的“反应”方式重新编写此代码

reactjs - 如何以正确的“反应”方式重新编写此代码

问题描述

我正在尝试更改 react 中元素的 innerhtml，我的解决方案显然并不理想，因为我正在直接操作 DOM。我怎样才能以正确的方式写这个？useState 还是 useRef 会更好吗？基本上，如果选择加号则变为减号，如果选择减号则变为加号。每个按钮都是唯一的，并且有多个按钮

function App() {
const [tags, setTags] = useState([]);

const displayScores = (e) => {
    if (e.target.innerHTML == "+") {
      e.target.innerHTML = "-";
    } else {
      e.target.innerHTML = "+";
    }
  };


return (
    <>
{tags.filter((t) => t.studentEmail == students.email).map((tag, index) => {
                      return (
                        <p key={index} className="student-tags">
                          {tag.value}
                        </p>
                      );
                    })}
                  <input
                    onKeyDown={addTag.bind(this, students.email)}
                    className="student-tag"
                    type="text"
                    placeholder="Add a tag"
                  />
                </div>
              </div>

              <button onClick={displayScores} className="expand-btn">+</button>
            </div>
          );
        })}
</>
)
}
export default App;

标签： reactjs

解决方案

我认为您根本不需要为此访问 DOM。您可以使用一些 React 状态（布尔值）来确定是否显示分数，然后根据该布尔值在按钮中呈现“+”或“-”。

// Your state
const [scoresDisplayed, setScoresDisplayed] = useState(false);

// Function to update state
const displayScores = () => {
    // Toggle the boolean state
    setScoresDisplayed(state => !state);
};

// Conditionally render button text
<button onClick={displayScores} className="expand-btn">
    {scoresDisplayed ? "-" : "+"}
</button>

推荐阅读