91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

react怎么獲取表單數據

小億
242
2023-12-09 03:31:36
欄目: 編程語言

在React中獲取表單數據有幾種方式:

  1. 使用受控組件:通過將input元素的值與state中的狀態值綁定,當用戶輸入時,state中的值也會更新。然后可以通過state中的值來獲取表單數據。
import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;
  1. 使用非受控組件:通過使用ref來獲取input元素的值。
import React, { useRef } from 'react';

function Form() {
  const nameRef = useRef();
  const emailRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value, emailRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} />
      <input type="email" ref={emailRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

上面的例子中,nameRef和emailRef分別引用了input元素,調用nameRef.current.value和emailRef.current.value就可以獲取到對應的input值。

這兩種方式都可以獲取表單數據,具體使用哪種方式要根據實際情況和個人喜好來決定。

0
浦北县| 易门县| 铁岭县| 深水埗区| 乳山市| 辽中县| 七台河市| 连南| 石城县| 安图县| 丰都县| 武山县| 北碚区| 卢龙县| 郁南县| 贡嘎县| 正镶白旗| 仁寿县| 娱乐| 体育| 博兴县| 延长县| 临高县| 德令哈市| 桃园县| 平陆县| 满洲里市| 睢宁县| 乌拉特中旗| 克东县| 阿勒泰市| 日喀则市| 高安市| 嵊泗县| 高台县| 五指山市| 修武县| 介休市| 成安县| 襄城县| 巴东县|