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

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

}

原文由 user944513 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 <form> 标签和 useRef 挂钩

用 html <form> 标签包装你的 <InputField> 标签，并在后面放一个反应 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

原文由 UtkarshPramodGupta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你总是可以提升父组件中的状态。 codeSandbox链接

父组件

import React from "react";
import ReactDOM from "react-dom";
import ChildComponent from "./Child";

const { useState } = React;

function App() {
  const [first_name, setFirstName] = useState("");
  const [last_name, setLastName] = useState("");
  const handleFirstNameChange = ({ target }) => {
    setFirstName(target.value);
  };
  const handleLastNameChange = ({ target }) => {
    setLastName(target.value);
  };
  const handleClick = () => {
    console.log(first_name);
    console.log(last_name);
  };
  return (
    <div className="App">
      <ChildComponent
        label="first name"
        onChange={handleFirstNameChange}
        value={first_name}
      />
      <ChildComponent
        label="last name"
        onChange={handleLastNameChange}
        value={last_name}
      />
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

子组件

import React from "react";

const ChildComponent = ({ label, onChange, value, name }) => {
  return (
    <div>
      <label>{label}</label>
      <input type="text" value={value} name={name} onChange={onChange} />
    </div>
  );
};

export default ChildComponent;

您始终可以将名字和姓氏的 onChange 处理程序结合起来。

希望有帮助！！！

原文由 tarzen chugh 发布，翻译遵循 CC BY-SA 4.0 许可协议