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

【问题标题】：How to get input field value on link click?如何在链接点击时获取输入字段值？
【发布时间】：2020-05-21 15:48:41
【问题描述】：

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

当我的演示应用程序运行时，它会显示一个输入字段（用户在其中输入手机号码）和一个按钮（文本发送 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 值。如果可能的话

有什么更新？？？？？？/

【问题讨论】：

标签： javascript reactjs react-hooks react-hook-form

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

虽然我认为表单逻辑有点“复杂”，但您可以使用从onSubmit 返回的data 将值传递回您的getForm() 函数。

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>
  )
}

然后捕获这样的值：

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>
    )
}

【讨论】：