React函数组件中React.createElement传参及状态更新异常问题

我正在使用React.createElement创建元素，基础功能正常，但尝试为input添加onChange属性及对应函数时遇到问题。

初始代码：

React.createElement('input', {type : 'text', id : 'titleInput', className : 'eventInput', onChange : SetTitle})

无参数的函数（比如按钮点击）没问题：

React.createElement('button', {type : 'submit', id : 'submitNewEventButton', className : 'eventInput', onClick : SubmitNewEvent}, 'Submit')

SetTitle需要获取输入框的值，JSX写法下可以正常工作：

<input type='text' id='emailInput' className='inputField' onChange={e => SetEmail(e.target.value)}/>

但换成createElement的两种写法都无法触发状态更新：

// 写法1
React.createElement('input', {type : 'text', id : 'titleInput', className : 'eventInput', onChange : (e) => SetTitle(e.target.value)})

// 写法2
React.createElement('input', {type : 'text', id : 'titleInput', className : 'eventInput', onChange(e){SetTitle(e.target.value)}})

函数组件中状态定义如下：

const [title, SetTitle] = useState('');

提交时title始终是初始空值，但JSX写法下状态能正常更新，请问为什么createElement方式无法实现？

问题排查与解决 #

你的createElement写法本身是正确的，出现问题大概率是以下几个原因：

1. 组件渲染逻辑错误 #

检查是否createElement创建的input没有被正确渲染到DOM中，比如：

• 是否在组件的返回值中正确包含这个元素？
• 是否存在条件渲染导致input被隐藏或替换？
• 是否重复创建相同id的元素，导致实际交互的是另一个未绑定状态的input？

2. 闭包捕获旧值问题 #

如果createElement是在某个闭包（比如定时器、useEffect的回调）中创建的，可能捕获了旧的SetTitle函数或title状态。确保createElement是在组件的渲染函数（或返回值）中直接调用，这样每次渲染都会获取最新的状态和更新函数。

3. 事件被阻止冒泡 #

检查父元素是否有阻止change事件冒泡的逻辑（比如e.stopPropagation()），导致input的onChange无法触发。

4. 确认createElement参数完整性 #

React.createElement的第三个参数是子元素，input标签不需要子元素，但如果误传了无效参数，可能导致元素异常。确保调用格式正确：

// 正确格式：元素类型，props对象，子元素（可选）
React.createElement('input', { /* props */ })

验证正确写法示例 #

以下是可以正常工作的完整函数组件示例：

import { useState } from 'react';

function InputComponent() {
  const [title, SetTitle] = useState('');

  const handleSubmit = () => {
    console.log('提交的title:', title);
    // 这里执行存入数据库的逻辑
  };

  return (
    <div>
      {React.createElement('input', {
        type: 'text',
        id: 'titleInput',
        className: 'eventInput',
        onChange: (e) => SetTitle(e.target.value)
      })}
      {React.createElement('button', {
        type: 'button',
        onClick: handleSubmit
      }, '提交')}
    </div>
  );
}

export default InputComponent;

如果还是无法解决，建议在onChange回调中添加console.log(e.target.value)，确认事件是否被触发，以此缩小排查范围。

内容的提问来源于stack exchange，提问作者Kastor438