如何在反应中单击按钮时获取输入字段值？

Question

你能告诉我如何在点击按钮获取输入字段值的反应，我使用的反应挂钩。我想first name和lastname按钮点击的价值。我已经name在我的函数组件中传递了属性。

这是我的代码

import React, { Component, useState } from 'react';
import { render } from 'react-dom';

export default function InputField({name,label}) {
  const [state, setState] = useState('')
  return (
    <div>
     <label>{label}</label>
      <input type="text" 
      value={state} 
      name={name}
      onChange={(e) => setState(e.target.value)} />

      {state}
    </div>
  );

}

Answer 1

使用<form>带useRef钩子的标签

<InputField>用 html<form>标签包裹你的标签，然后ref在后面做出反应。像这样：

import React, { Component, useRef } from 'react'
import { render } from 'react-dom'

import InputField from './inputfield'

import './style.css'

function App () {
  const nameForm = useRef(null)

  const handleClickEvent = () => {
     const form = nameForm.current
     alert(`${form['firstname'].value} ${form['lastname'].value}`)
  }

  return (
    <div>
      <form ref={nameForm}>
       <InputField label={'first name'} name={'firstname'}/>
       <InputField label={'last name'} name={'lastname'}/>
      </form>
      <button onClick={handleClickEvent}>gett value</button>
    </div>
  )
}

render(<App />, document.getElementById('root'))

工作示例： https : //stackblitz.com/edit/react-shtnxj

Answer 2

对我来说最简单的方法是useRef

有了useRef它就很简单了。只需添加ref名称，然后提交即可。

const email = useRef(null);

function submitForm(e){
 e.preventDefault();
 
 console.log(email.current.value);
}

return (
 <div>
  <form onSubmit={submitForm}>
   <input type="text" ref={email} />
   <button>Submit</button>
  </form>
 </div>
)