使用React js在表单中输入的Console.log数据

import React, { useState } from 'react';

function InputForm() {
  // 使用useState钩子来创建一个状态变量inputValue
  const [inputValue, setInputValue] = useState('');

  // 处理输入框的变化事件
  const handleInputChange = (event) => {
    // 更新状态变量
    setInputValue(event.target.value);
    // 使用console.log输出当前的输入值
    console.log('当前输入值:', event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="请输入文本"
      />
    </div>
  );
}

export default InputForm;

import React, { useState, useEffect } from 'react';

function InputForm() {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    console.log('状态更新后的值:', inputValue);
  }, [inputValue]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="请输入文本"
      />
    </div>
  );
}

export default InputForm;