react 获取表单中输入框的值_react getelementsbyname 获取输入值-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59525879/article/details/132125389

文章介绍了如何在React中使用useStateHook处理多个Input框和Select框的值变化，包括获取和更新状态。通过`handleInputChange`和`handleNameChange`,`handleNationChange`函数实现值的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过使用useState钩子来创建一个状态变量，你可以同时获取多个Input框的值。

1获取input框的值：

import React, { useState } from 'react';

function MyComponent() {
  const [forms, setForms] = useState({
    name: '',
    nation: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;

    setForms((prevForms) => ({
      ...prevForms,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log('姓名:', forms.name);
    console.log('国家:', forms.nation);

    // 执行其他逻辑
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          value={forms.name}
          onChange={handleInputChange}
        />
        <input
          type="text"
          name="nation"
          value={forms.nation}
          onChange={handleInputChange}
        />
        {/* 添加其他Input框 */}
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

export default MyComponent;

2获取select框的值

import { useState } from 'react';
import { Select } from 'antd';

const { Option } = Select;

const YourComponent = () => {
  const [forms, setForms] = useState({
    name: "",
    nation: ""
  });

  const handleNameChange = (value) => {
    setForms(prevState => ({
      ...prevState,
      name: value
    }));
  };

  const handleNationChange = (value) => {
    setForms(prevState => ({
      ...prevState,
      nation: value
    }));
  };

  return (
    <>
      <Select value={forms.name} onChange={handleNameChange}>
        <Option value="John">John</Option>
        <Option value="Jane">Jane</Option>
        <Option value="Bob">Bob</Option>
      </Select>

      <Select value={forms.nation} onChange={handleNationChange}>
        <Option value="USA">USA</Option>
        <Option value="Canada">Canada</Option>
        <Option value="UK">UK</Option>
      </Select>
    </>
  );
};