正确处理React TextArea的onChange事件：捕获值与状态更新

// 假设 handleChangeModalWorkflow 返回的不是一个函数
<TextArea
  value={note}
  onChange={handleChangeModalWorkflow("note")} // 错误：handleChangeModalWorkflow("note") 会在渲染时立即执行
/>

// 确保 handleChangeModalWorkflow("note") 在 onChange 事件触发时才被调用
<TextArea
  value={note}
  onChange={() => handleChangeModalWorkflow("note")}
/>

import React, { useState } from 'react';

function MyComponent() {
  const [note, setNote] = useState('');

  const handleNoteChange = (e) => {
    setNote(e.target.value);
    console.log("Current input value:", e.target.value); // 实时显示输入值
  };

  return (
    <div>
      <label htmlFor="myNote">笔记内容:</label>
      <textarea // 使用标准的textarea标签，React会将其作为TextArea组件处理
        id="myNote"
        value={note}
        onChange={handleNoteChange} // 直接传入函数引用
        placeholder="请输入笔记内容..."
      />
      <p>你输入的内容是: {note}</p>
    </div>
  );
}

import React, { useState } from 'react';

function MyModalWorkflowComponent() {
  const [formData, setFormData] = useState({
    title: '',
    note: '',
    status: 'pending',
  });

  // 这是一个通用的处理函数，接收字段名和新的值
  const handleChangeModalWorkflow = (fieldName, value) => {
    setFormData(prevData => ({
      ...prevData,
      [fieldName]: value,
    }));
    // 注意：这里的 console.log 可能不会立即显示最新的 formData，因为 setState 是异步的
    // 如果需要立即对更新后的状态执行操作，可以使用 useEffect 钩子
  };

  // 示例：使用 useEffect 监听 formData 变化以确保获取最新值
  // useEffect(() => {
  //   console.log("Latest form data:", formData);
  // }, [formData]);

  return (
    <div>
      <h2>工作流表单</h2>
      <label htmlFor="workflowTitle">标题:</label>
      <input
        id="workflowTitle"
        type="text"
        value={formData.title}
        onChange={(e) => handleChangeModalWorkflow("title", e.target.value)}
      />
      <br />
      <label htmlFor="workflowNote">笔记:</label>
      <textarea // 使用标准的textarea标签
        id="workflowNote"
        value={formData.note}
        // 关键：使用箭头函数捕获事件对象，并提取 e.target.value
        onChange={(e) => handleChangeModalWorkflow("note", e.target.value)}
        placeholder="请输入详细笔记..."
        rows={4}
      />
      <p>当前笔记内容: {formData.note}</p>
    </div>
  );
}