javascript - 如何在链接点击时获取输入字段值？

Question

我正在dynamically使用 json 生成我的表单。但是在单击时获取输入字段的值时，我在一个地方感到震惊。

当我的演示应用程序运行时，它会显示一个输入字段（用户在其中输入手机号码）和一个按钮（文本发送 OTP）。输入数字示例（9891234178）并按 Enter 后，它会显示OTP字段和一个链接resend OTP。

我想在单击时捕获link（重新发送 otp）的单击处理程序我想获取我的输入字段值（手机号码值）。

是否有可能获得价值？

这是我的代码 https://codesandbox.io/s/react-hook-form-get-started-lokp2

case "link":
  return (
    <div className="form-group">
      <p className="user-link">
        <span onClick={() => {}}> {label}</span>
      </p>
    </div>
  );

我的目标是添加点击处理程序link并尝试获得mobile number价值。如果可能的话

任何更新？？？？？/

Answer 1

您可能希望阅读文档的两种方法：

此函数将返回整个表单数据，当您要检索表单值时，它在函数中很有用。 https://react-hook-form.com/api#getValues

这将监视指定的输入/输入并返回其值，这对于确定要渲染的内容很有用。 https://react-hook-form.com/api#watch

Answer 2

Although I think the form logic is a bit "complicated", you could use the data that returned from onSubmit to pass the values back to your getForm() function.

const App = () => {
  // Create a new `state`
  const [formValues, setFormValue] = useState({})
  //...

  const onSubmit = data => {
    //...
    // assign the form data to the 'formValues' state
    setFormValue(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      {!state
        ? getForm(forgetPasswordConfig, register, errors)
        : getForm(
            forgetPasswordAfterSendingOtpConfig,
            register,
            errors,
            formValues // pass back the values
          )}
    </form>
  )
}

Then catch the values like this:

export const getForm = (config, register, errors, formValues) => {

  // Based on `state`, formValues will be available and filled after the user clicks on 
  // the first button "Send OTP" and so, you can get the field value by its name "msisdn"

  case "link":
    return (
      <div className="form-group" key={index}>
        <p className="user-link">
          <span onClick={() => console.log(formValues.msisdn)}> {label}</span>
        </p>
      </div>
    )
}