英文:
How to get text content of a clicked element with React
问题
我有一堆按钮，我想在单击其中任何一个按钮时获取单击元素的 innerText，我该如何在 React 中实现这个功能。
在这个示例中，该代码仅适用于第一个按钮，因为我设置了 value 属性。
function App() {const [text, setText] = useState("");const handleButtonClick = (e) => {console.log(e.target.value);setText(e.target.value);};return (<><div className="buttons"><button value="buttonOne" onClick={handleButtonClick}>buttonOne</button><button onClick={handleButtonClick}>buttonTwo</button></div><p>{text}</p></>)}
英文:
I have a bunch of buttons and I want when I click on any of them get the innerText of the clicked element how I can do that with React.
In this example the code will work only with first button cause I put the value attribute.
function App() {const [text, setText] = useState("");const handleButtonClick = (e) => {console.log(e.target.value);setText(e.target.value);};return (<><div className="buttons"><button value={"buttonOne"} onClick={handleButtonClick}>buttonOne</button><button onClick={handleButtonClick}>buttonTwo</button></div><p>{text}</p></>)}
答案1
得分: 1
你可以使用 element.innerText 来获取按钮的 "文本"。或者，您还可以使用 element.innerHTML 或 element.textContent。
const { useState, Fragment } = React;function App() {const [text, setText] = useState("");const handleButtonClick = (e) => {console.log(e.target.innerText);setText(e.target.value);};return (<Fragment><div className="buttons"><button value={"buttonOne"} onClick={handleButtonClick}>buttonOne</button><button onClick={handleButtonClick}>buttonTwo</button></div><p>{text}</p></Fragment>)}ReactDOM.createRoot(document.getElementById("root")).render(<App />);
需要注意的是，在React中通常不建议使用这些原生DOM操作，因为对DOM进行命令式操作在声明式应用中是不明智的。更好的方法是使用存储器来存储按钮内容，并从那里检索它。
英文:
You can use element.innerText to get the "text" of the button. Alternatively you can use element.innerHTML or element.textContent.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const { useState, Fragment } = React;function App() {const [text, setText] = useState("");const handleButtonClick = (e) => {console.log(e.target.innerText);setText(e.target.value);};return (<Fragment><div className="buttons"><button value={"buttonOne"} onClick={handleButtonClick}>buttonOne</button><button onClick={handleButtonClick}>buttonTwo</button></div><p>{text}</p></Fragment>)}ReactDOM.createRoot(document.getElementById("root")).render(<App />);
<!-- language: lang-html -->
<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- end snippet -->
It should be noted that using these native DOM operations is usually an anti-pattern in React, for a declarative app it's ill advised to access content on the DOM imperatively. A better approach would be to use a store for your button contents and retrieve it from there.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论