封装@progress/kendo-react-inputs的Input适配ReduxForm时出错，求解决

看起来你遇到的问题大概率是Redux Form的input对象与Kendo UI Input组件的props不兼容导致的——最常见的就是onChange事件的参数格式不匹配。我来帮你修正这个封装组件：

问题根源 #

Redux Form传递的input对象里，onChange方法期望直接接收输入的值；但Kendo UI的Input组件触发onChange时，传递的是一个ChangeEvent事件对象，直接展开{...input}会让Redux Form无法正确获取输入值，进而引发错误。

修正后的封装代码 #

import React from 'react'
import { Input } from '@progress/kendo-react-inputs';

const InputText = ({ input, label, type, meta: { touched, error }, ...rest }) => (
  <div>
    {label && <label>{label}</label>}
    <div>
      <Input
        // 传递Kendo Input需要的基础props
        type={type}
        placeholder={label}
        // 适配Redux Form的value
        value={input.value}
        // 适配onChange事件：从event中提取值传递给Redux Form的onChange
        onChange={(event) => input.onChange(event.target.value)}
        // 适配onBlur事件（Redux Form需要追踪触摸状态）
        onBlur={() => input.onBlur(input.value)}
        // 传递其他自定义props
        {...rest}
      />
      {/* 错误提示逻辑保留 */}
      {touched && error && <span style={{ color: 'red', marginTop: '4px', display: 'block' }}>{error}</span>}
    </div>
  </div>
);

export default InputText;

关键适配点说明 #

• onChange适配：通过event.target.value提取输入值，再传递给Redux Form的input.onChange，保证两者的参数格式匹配
• onBlur适配：手动触发Redux Form的input.onBlur，确保meta.touched状态能正确更新
• 显式传递value：虽然展开input也会带value，但显式传递更清晰，避免潜在的props覆盖问题
• 保留剩余props：通过...rest可以传递Kendo Input的其他自定义props（比如disabled、style等）

使用示例 #

在Redux Form的Field中使用这个封装组件：

import { Field, reduxForm } from 'redux-form';
import InputText from './InputText';

const MyForm = (props) => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        component={InputText}
        type="text"
        label="用户名"
        disabled={false} // 可以传递Kendo Input的其他props
      />
      <button type="submit">提交</button>
    </form>
  );
};

export default reduxForm({ form: 'myForm' })(MyForm);

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