如何有效地通过 React 中父级的引用访问子级？
Posted
技术标签:
【中文标题】如何有效地通过 React 中父级的引用访问子级？【英文标题】：How to access child by the reference of parent in React effectively? 【发布时间】：2021-08-29 06:14:30 【问题描述】：我的 html :-
<form>
<div class="userPhoto"><img src="https://picsum.photos/300/700" ></div>
<div class="name">
<div class="fN">
<p>First Name :</p>
<div class="ic"><input type="text" name="first_name">
<div class="icon">
<div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
<div class="fN">
<p>Last Name :</p>
<div class="ic"><input type="text" name="last_name">
<div class="icon">
<div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
</div>
<div class="email">
<div class="cont">
<p>Enter your email :</p>
<div class="ic"><input type="email" name="email">
<div class="icon">
<div class="error" style="display: block; visibility: visible;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: none;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
<div class="process">
<p class="pc">Checking Availability...</p>
<p class="ps">Email is available .</p>
<p class="pe">This Email is already in use .</p>
</div>
</div>
<div class="contact_no">
<div class="cont">
<p>Enter your contact number :</p>
<div class="ic"><input type="number" name="email">
<div class="icon">
<div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
<div class="process">
<p class="pc">Checking Availability...</p>
<p class="ps">contact no. is available .</p>
<p class="pe">This contact no. is already in use .</p>
</div>
</div>
<div class="userName">
<div class="cont">
<p>Choose an user name:</p>
<div class="ic"><input type="text" name="email">
<div class="icon">
<div class="error" style="display: block; visibility: visible;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: none;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
<div class="process">
<p class="pc">Checking Availability...</p>
<p class="ps">user name is available .</p>
<p class="pe">This user name is already in use .</p>
</div>
</div>
<div class="password">
<div class="cont">
<p>create an strong PASSWORD:</p>
<div class="ic"><input type="password" name="email">
<div class="icon">
<div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
</div>
<div class="conform_password">
<div class="cont">
<p>conform password:</p>
<div class="ic"><input type="password" name="email">
<div class="icon">
<div class="error" style="display: none; visibility: hidden;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg></div>
<div class="success" style="display: block;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg></div>
</div>
</div>
</div>
</div>
<div class="formSubmit">
<div class="button">
<p>Sign up</p>
</div>
</div>
</form>
我将 const form = useRef(null); 引用到 html form 元素。
但我需要 input 内的 .password class 值。
我现在在 React 中的表现如何
let passwordText = form.current.children[5].children[0].children[1].children[0].value;
但我认为这是不对的。因为它很长。而且我不愿意使用另一个变量作为密码参考。
有没有简单快捷的方法来实现这一点？
【问题讨论】：
在反应世界中，每个元素都可以有自己的ref。为什么你坚持使用父 ref 来获取嵌套的子值，而不是在密码上使用新的 ref？也许最初的原因是错误的。
【参考方案1】：
实现这一点的最简单方法是在 javascript 中使用事件。 在密码输入上放置一个 onChange() 函数，如下所示
<input type="password" onChange=handleChange />
handleChange 函数看起来像
handleChange = (e) => console.log(e.target.value);
我在这里进行控制台日志记录只是为了举例。您可以将值保存在某个状态变量中，也可以直接保存到 localStorage 或外部数据库中。
如果您不想跟踪每次更改，您可以有一个按钮并仅在该按钮单击时调用此方法，这将减少调用此函数的时间。
要使用 useRef() 做同样的事情，您可以在密码本身的输入标签上放置一个引用 const password = useRef(null)。您可以使用 password.current.value 从该输入中获取值。
我希望这个答案会有所帮助。如果是，请将其标记为已接受。
【讨论】：
所以我必须为仅密码创建另一个变量？？【参考方案2】：由于您已经可以访问formRef，因此您可以使用以下内容获取表单中的特定输入。
const passwordEl = formRef.current.querySelector('.password')
现在你可以像这样访问它的属性了
console.log(passwordEl.value, passwordEl.name)
这是一个使用 age 输入字段的示例
codesandbox
【讨论】：
以上是关于如何有效地通过 React 中父级的引用访问子级？的主要内容，如果未能解决你的问题，请参考以下文章