如何解决在我的React应用程序中,我不知道如何将输入框的值传递给按钮的onclick
方案是使用自己的发送按钮创建的输入框数量未知。用户输入一些值,然后单击该值,然后将与该输入关联的URI发送到将两个值连接在一起并在浏览器中打开的函数。我已经在普通的JS和Angular 9中做到了这一点,但是我不知道如何在React中做到这一点。我在React冒险中只有5天,我怀疑自己的方法是错误的。
在Angular中,我将创建对输入框的引用,在onclick中,我将添加reference.value
。我该如何在React中做到这一点?
这很可能是重复的,但是我一直无法找到适合我的用例的质量检查。
Stackblitz starter app,现在它只是传递一个字符串。
class App extends React.Component {
constructor(props) {
super(props);
}
handleClick(data){
alert(data)
}
render() {
return (
<div>
<form>
<input placeholder='enter data' />
</form>
<br />
<botton className='btn' onClick={() => this.handleClick('test')}>Click</botton>
</div>
);
}
}
解决方法
您可以通过使用React.useRef
来做到这一点:
import React from "react";
export default function App() {
const ref = React.useRef();
const handleClick = (data) => {
alert(data)
}
return (
<div>
<form>
<input ref={ref} placeholder='enter data' />
</form>
<br />
<botton className='btn' onClick={() => handleClick(ref.current.value)}>Click</botton>
</div>
);
}
尽管,我会采用另一种方法(从方法而不是调用本身获取值:
import React from "react";
export default function App() {
const ref = React.useRef();
const handleClick = () => {
if (ref) {
alert(ref.current.value);
}
};
return (
<div>
<form>
<input ref={ref} placeholder="enter data" />
</form>
<br />
<botton className="btn" onClick={handleClick}>
Click
</botton>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。