设置datepicker的classname以用作Redux Form字段中的组件

Question

我正在尝试使用redux格式的材料ui将className设置为import React from 'react'; import { DatePicker } from 'redux-form-material-ui' const CustomDatePicker = props => ( <DatePicker {...props} /> ) export default CustomDatePicker; 组件。

我的自定义组件是这样的：

var datePicker = <CustomDatePicker className="testClass" />;
...
...
<Field name="dateTime" type="text" component={datePicker} format={value => value ? new Date(value) : null}  />

我试图像下面这样使用它：

Invalid Prop component supplied to Field

但我收到错误pointer-events: none

有人能指出我需要解决这个问题吗？ 谢谢！

Answer 1

Redux-form Field将自己的道具传递给将要呈现的组件，因此您可以将className传递给Field，请参阅示例：

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { DatePicker } from 'redux-form-material-ui';

import './style.css';

const ExampleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Date</label>
        <div>
          <Field
            className="testClass"
            name="date"
            component={DatePicker}
          />
        </div>
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>Submit</button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'example',
})(ExampleForm);

className='testClass'将传递给示例中的DatePicker组件。