如何在 TypeScript 中使用 React.findDOMNode
介绍
任何 Web 应用都涉及大量使用表单，使用表单需要您读取 DOM 值，例如从输入字段读取。这些值可以存储在状态中、在前端验证或发送到服务器。在这种情况下，React 允许您使用名为React.findDOMNode()的方法，该方法返回原生浏览器 DOM 元素。但是，在 TypeScript 中使用该方法需要对标准代码进行一些额外的更改。
本指南将向您展示如何在 React 和 TypeScript 应用程序中正确使用React.findDOMNode()从 DOM 元素中提取值。
设置 React Typescript 应用程序
通过运行以下命令在 React 中创建一个空的 TypeScript 项目：
npx create-react-app react-dom-ts --typescript
然后创建一个名为Form.tsx的简单表单组件。
import React from 'react';
export class Form extends React.Component<{},{}> {
render() {
return <h1>Inside Form Comp</h1>;
}
}
上面的组件只是渲染了一些文本。添加state和props的接口，并将它们传递给表单组件的类声明。state 包含一个字符串类型的属性名。
import React from 'react';
interface State{
name:String
}
interface Props{
}
export class Form extends React.Component<Props,State> {
render() {
return <h1>Inside Form Comp</h1>;
}
}
在构造函数内部初始化状态。
constructor(props: Props){
super(props);
this.state={
name:''
}
}
到目前为止，您的表单组件的样板已经准备好了。
创建表单模板
现在样板已准备就绪，接下来在表单组件的render()方法内添加一个表单，其中包含一个输入字段和一个提交按钮。要获取对输入的引用，请为该字段分配一个ref属性，如下所示。
render() {
return
<form className="commentForm">
<input type="text" placeholder="Your name" ref="name" />
<button type="submit" >Submit</button>
{this.state.name}
</form>;
}
另外，向表单添加onSubmit事件来监听表单上的提交事件。
...
return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }>
...
现在，所有 DOM 操作都可以在handleSubmit()方法中完成。此方法将事件对象作为React.FormEvent类型的参数。调用e.preventDefault()方法来阻止重新加载页面的默认提交操作。
handleSubmit(e: React.FormEvent) {
e.preventDefault();
}
在 TypeScript 中使用 React.findDOMNode()
要获取输入的 DOM 元素，请使用ReactDOM.findDOMNode()方法，传入 DOM 元素的引用对象作为参数。在类组件中，可以通过调用this.refs并在方括号中传递 ref 的名称来访问引用。您可以将其与使用括号表示法访问对象中的键联系起来。请考虑以下代码行：
let input = ReactDOM.findDOMNode(this.refs["name"])
ReactDOM.findDOMNode()返回整个输入元素并将其存储在局部变量input中。如果你用 JavaScript 编写上述代码，一切都会按预期工作。然而，在 TypeScript 中，你还必须指定请求元素的类型。由于它返回HTMLInputElement类型的 DOM 节点，因此你必须使用as关键字指定它。因此，上述代码行变为
let input = ReactDOM.findDOMNode(this.refs["name"]) as HTMLInputElement;
现在，input 变量存储了整个输入 DOM 节点。要获取此字段中输入的值，请调用此元素上的value属性并将其存储在状态中。
handleSubmit(e: React.FormEvent) {
e.preventDefault();
let input = ReactDOM.findDOMNode(this.refs["name"]) as HTMLInputElement;
console.log(input.value)
this.setState({
name:input.value
})
}
最终代码
让我们把上面的所有代码片段组合起来。最终的代码如下。
import React from 'react';
import * as ReactDOM from 'react-dom'
interface State{
name:String
}
interface Props{
}
export class Form extends React.Component<Props, State> {
constructor(props: Props){
super(props);
this.state={
name:''
}
}
handleSubmit(e: React.FormEvent) {
e.preventDefault();
let input = ReactDOM.findDOMNode(this.refs["name"]) as HTMLInputElement;
console.log(input.value)
this.setState({
name:input.value
})
}
render() {
return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }>
<input type="text" placeholder="Your name" ref="name" />
<button type="submit" >Submit</button>
{this.state.name}
</form>;
}
}
最后，记得在App.tsx中渲染你的 Form 组件
import React from 'react';
import './App.css';
import { Form } from './Home';
function App() {
return (
<div className="App">
<Form/>
</div>
);
}
export default App;
如果您在输入字段中输入任何内容并点击提交按钮，您将看到该字段的值在控制台和页面上注销。这验证您已成功使用React.findDOMNode()捕获输入字段的值并将其存储在组件的状态中。
结论
只需将ref回调附加到特定的 DOM 节点，您便可以顺利完成所有所需的 DOM 操作。findDOMNode更像是一种技巧，可用于访问 DOM 元素。如果您在尚未创建或挂载到 DOM 上的组件或功能组件上调用它，则会抛出异常。 React 的官方文档明确表示应避免使用它，因为它脱离了 React 的组件架构。您可以使用它的一个实际情况是当您的目标ref本身就是一个组件时。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~