如何有效地通过 React 中父级的引用访问子级？

Question

我的 html :-

<form>
  <div class="userPhoto"><img src="https://picsum.photos/300/700" alt=""></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;

但我认为这是不对的。因为它很长。而且我不愿意使用另一个变量作为密码参考。

有没有简单快捷的方法来实现这一点？

Answer 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 从该输入中获取值。

我希望这个答案会有所帮助。如果是，请将其标记为已接受。

Answer 2

由于您已经可以访问formRef，因此您可以使用以下内容获取表单中的特定输入。

const passwordEl = formRef.current.querySelector('.password')

现在你可以像这样访问它的属性了

console.log(passwordEl.value, passwordEl.name)

这是一个使用 age 输入字段的示例

codesandbox