如何在反应中访问表单值 - Javascript

在React中，我们有多种方式可以访问表单值。下面将介绍4种最常用的方法。

使用受控组件

受控组件是指将React组件的值与state中的某个状态相关联。当组件的值发生变化时，我们可以通过setState()更新状态，从而实现访问表单值的目的。

例如，下面是一个示例代码：

import React, { useState } from 'react';

function MyForm() {
  const [username, setUsername] = useState('');

  function handleInputChange(e) {
    setUsername(e.target.value);
  }

  return (
    <form>
      <label>
        Username:
        <input type="text" value={username} onChange={handleInputChange} />
      </label>
      <p>Your username is: {username}</p>
    </form>
  );
}

在这个示例中，我们定义了一个状态username，并将它与的value属性相关联。当的值发生变化时，handleChange()函数会更新username的值。然后，我们可以使用{username}在页面上展示用户名。

使用非受控组件

非受控组件是指表单元素的值没有与React组件的状态相关联。我们可以使用ref访问表单元素的值。

例如，下面是一个示例代码：

function MyForm() {
  const usernameRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    const username = usernameRef.current.value;
    console.log(username);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" ref={usernameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

在这个示例中，我们使用了一个ref引用了username的元素，然后在handleSubmit()函数中使用usernameRef.current.value访问表单值。

使用事件对象

当表单元素的事件被触发时，我们可以访问事件对象，通过事件对象获取元素的值。

例如，下面是一个示例代码：

function MyForm() {
  function handleSubmit(e) {
    e.preventDefault();
    const username = e.target.elements.username.value;
    console.log(username);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" name="username" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

在这个示例中，我们在handleSubmit()函数中使用了参数e，它是事件对象。我们通过e.target.elements.username.value访问表单值。

使用第三方库

除了React自带的API外，我们还可以使用第三方库来访问表单值。例如，jQuery和Lodash都有提供访问表单元素值的方法。

例如，使用jQuery：

function MyForm() {
  function handleSubmit(e) {
    e.preventDefault();
    const username = $('#username').val();
    console.log(username);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" id="username" />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

在这个示例中，我们使用了jQuery库的选择器$('#username')来选择元素，然后使用.val()方法获取它的值。

以上是使用React中访问表单值的4种方式，每种方式都有其优缺点。在实际项目中需要结合需求选择最合适的方法。