[英]How to get button value on click in reactJs?
I have a button I'm using functional component in reactJs and i want to get button value on click, how can i get this?我有一个按钮,我在 reactJs 中使用功能组件,我想在点击时获得按钮值,我怎样才能得到这个?
My Code:-我的代码:-
const Forms = () => { const handleClick =(event) =>{ const getSameValue = event.target.value console.log(getSameValue); } return ( <button onClick={handleClick}>Test</button> ); };
Thanks for your Efforts!感谢您的努力!
What you're doing would mostly work, although you want currentTarget
, not target
(you'd see the difference if your button
had a span
around its text), but your button
doesn't have any value
attribute, so its value is ""
.您正在做的大部分工作都会起作用,尽管您想要
currentTarget
,而不是target
(如果您的button
在其文本周围有一个span
,您会看到差异),但是您的button
没有任何value
属性,因此它的值为""
。 The value of an input
or button
is accessed via the value
attribute (and optionally, for some kinds of input
, valueAsNumber
or valueAsDate
).一个的值
input
或button
经由访问value
属性(以及可选地,对于某些种类的input
, valueAsNumber
或valueAsDate
)。 Your button has text content, but no value.您的按钮有文本内容,但没有价值。
const Forms = () => { const handleClick =( event) => { const theValue = event.currentTarget.value; console.log("the value:", theValue); const theText = event.currentTarget.textContent; console.log("the text: ", theText); }; return ( <button value="this is the value" onClick={handleClick}>Test</button> ); }; ReactDOM.render(<Forms />, document.getElementById("root"));
<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
您必须在按钮标签上定义一个“值”属性,例如:
<button value='button value' onClick={handleClick}>Test</button>
You should add a value
attribute to the button component and either use hooks or state to set the value and access it throughout the function/class.您应该为按钮组件添加一个
value
属性,并使用钩子或状态来设置值并在整个函数/类中访问它。
Adding value
attribute to the button:给按钮添加
value
属性:
<button value="someVal" onClick={handleClick}>Test</button>
Create and store button value using hooks使用钩子创建和存储按钮值
const [btn,btnVal] = useState("")
handleClick手柄点击
const handleClick =(event) =>{
const getSameValue = event.currentTarget.value
btnVal(getSameValue)
}
For class-based components:对于基于类的组件:
export default class App extends React.Component {
//const [count, setCount] = useState("");
constructor(){
super()
this.state={
val:""
}
}
handleClick = (event) =>{
this.setState({val:event.currentTarget.value})
}
render(){
return (
<div>
<p>Button value: {this.state.val}</p>
<button value="abcd" onClick={this.handleClick}>
Click me
</button>
</div>
);
}
}
Further, you could access the button's value directly using the state or hook variable.此外,您可以使用 state 或 hook 变量直接访问按钮的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.