解决React onChange事件未更新TextArea组件值的疑难杂症

import React, { useState } from 'react';

function MyTextAreaComponent() {
  const [noteContent, setNoteContent] = useState('');

  // 事件处理器直接接收合成事件对象
  const handleNoteChange = (event) => {
    // event.target.value 包含了 textarea 当前的输入值
    setNoteContent(event.target.value);
    console.log("当前输入值:", event.target.value);
  };

  return (
    <div>
      <label htmlFor="myNote">笔记内容:</label>
      <textarea
        id="myNote"
        value={noteContent} // 将状态绑定到 value 属性
        onChange={handleNoteChange} // 传递函数的引用
        rows="5"
        cols="30"
      />
      <p>您输入的内容: {noteContent}</p>
    </div>
  );
}

export default MyTextAreaComponent;

import React, { useState } from 'react';

function MultiFieldForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    note: ''
  });

  // 通用事件处理器，接收字段名和事件对象
  const handleChange = (fieldName, event) => {
    setFormData(prevData => ({
      ...prevData,
      [fieldName]: event.target.value
    }));
    console.log(`字段 '${fieldName}' 更新为:`, event.target.value);
  };

  return (
    <div>
      <label>名:</label>
      <input
        type="text"
        value={formData.firstName}
        onChange={(e) => handleChange('firstName', e)} // 使用匿名函数传递 'firstName' 和事件对象 'e'
      />
      <br />
      <label>姓:</label>
      <input
        type="text"
        value={formData.lastName}
        onChange={(e) => handleChange('lastName', e)} // 同理
      />
      <br />
      <label>备注:</label>
      <textarea
        value={formData.note}
        onChange={(e) => handleChange('note', e)} // 匿名函数确保在事件发生时调用 handleChange
        rows="3"
        cols="30"
      />
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
}

export default MultiFieldForm;

import React, { useRef } from 'react';

function ModalWorkflowComponent() {
  const noteRef = useRef(null); // 使用 useRef 获取 textarea 的引用

  // 这个函数在被调用时，不直接接收事件对象
  // 而是依赖于 'note' 标识符来执行操作
  const handleChangeModalWorkflow = (fieldIdentifier) => {
    if (fieldIdentifier === "note" && noteRef.current) {
      // 假设我们通过 ref 来获取当前值
      const currentValue = noteRef.current.value;
      console.log(`模态工作流字段 '${fieldIdentifier}' 触发, 当前值为:`, currentValue);
      // 在这里执行与 'note' 相关的其他逻辑，例如触发一个副作用或更新全局状态
    }
  };

  return (
    <div>
      <label htmlFor="workflowNote">工作流备注:</label>
      <textarea
        id="workflowNote"
        ref={noteRef} // 将 ref 绑定到 textarea
        onChange={() => handleChangeModalWorkflow("note")} // 匿名函数确保在事件发生时调用
        rows="5"
        cols="30"
        defaultValue="初始备注内容" // 使用 defaultValue 而不是 value，因为我们不直接通过 state 控制
      />
      <p>请注意，此示例中 textarea 的值不直接由 React state 控制。</p>
    </div>
  );
}

export default ModalWorkflowComponent;