英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论