在反应中使用插件国际电话输入答案

【问题标题】：use plugin International Telephone Input in react在反应中使用插件国际电话输入
【发布时间】：2019-08-07 09:31:37
【问题描述】：

我对反应很陌生，我只想在我的表单中使用这个https://github.com/jackocnr/intl-tel-input 插件。但是在文档中说要使用纯js输入id查询选择器来使用插件。但是如何更改这种代码以响应使用情况。

文档中的代码示例：

<input type="tel" id="phone">
<script src="path/to/intlTelInput.js"></script>
<script>
  var input = document.querySelector("#phone");
  window.intlTelInput(input);
</script>

【问题讨论】：

在反应中查看refs
@BoyWithSilverWings 但如何通过 refs 使用 window.intlTelInput(input)
ref 将为您提供调用 intlTelInput 的 DOM 节点。你会想要在 componentDidMount 和/或 componentDidUpdate 中调用。

标签： reactjs

【解决方案1】：

您应该避免在React 项目中使用Jquery。你可以做到React 方式。

对于intl-tel-input，有react-intl-tel-input 和react-intl-tel-input-v2 包可用。

import ReactIntlTelInput from 'react-intl-tel-input-v2';
import 'intl-tel-input/build/css/intlTelInput.css';


<ReactIntlTelInput
    value={this.state.value}
    onChange={this.onChange}
/>

Demo

【讨论】：

【解决方案2】：

手动操作 DOM 不是一个好主意，因为 react 会为性能问题创建一个虚拟 DOM

React 创建一个自定义对象树，代表 DOM 的一部分。例如，不是创建包含 UL 的实际 DIV 元素元素，它创建一个包含 React.ul 的 React.div 对象目的。它可以非常快速地操作这些对象，而无需实际操作触摸真实的 DOM 或通过 DOM API。那么，当它渲染一个组件，它使用这个虚拟 DOM 来确定它是什么需要用真实的 DOM 来让两棵树匹配。

您可以将虚拟 DOM 视为蓝图。它包含所有构建 DOM 所需的详细信息，但因为它不需要所有进入真实 DOM 的重量级部分，都可以创建并且更容易改变。

source

您可以使用许多“现成的”反应组件。你可以像这样使用react-phone-number-input：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

import "./styles.css";

function App() {
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="App">
      <h1>International phone number</h1>
      <PhoneInput
        placeholder="Enter phone number"
        value={inputValue}
        onChange={inputValue => setInputValue(inputValue)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

看看codesandbox

如果你想了解更多关于 React 如何操作 DOM，你可以阅读this article。

【讨论】：