javascript - 如何从 devExtreme 将自定义 Prop 发送到我的自定义搜索面板

Question

所以我想将我的自定义 onChange 函数传递给我在带有 devextreme 网格的 ReactJS 中的自定义插件。

我有这样的 searchPanel 覆盖:

import { withComponents } from '@devexpress/dx-react-core';
import { SearchPanel as SearchPanelBase } from '@devexpress/dx-react-grid';
import { SearchPanelInput as Input } from './SearchPanelInputBase';

export const SearchPanel = withComponents({ Input })(SearchPanelBase);

然后是我的 searchPanelInputBase

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputAdornment from '@material-ui/core/InputAdornment';
import Search from '@material-ui/icons/Search';
import { Switch } from '@material-ui/core';
import StoreUsers from '../store/StoreUsers';

const styles = theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    color: theme.palette.action.active,
  },
  flexSpaced: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  }
});


let getActives = false

const SearchPanelInputBase = ({
  myCustomFunctionFromProps, classes, onValueChange, value, getMessage, props, ...restProps
}) => (
  <div className={classes.flexSpaced}>
    <Switch
      onChange={myCustomFunctionFromProps}
    />
    <Input
      onChange={e => onValueChange(e.target.value)}
      value={value}
      type="text"
      placeholder={getMessage('searchPlaceholder')}
      {...restProps}
      startAdornment={(
        <InputAdornment position="start">
          <Search />
        </InputAdornment>
    )}
      />
  </div>
);

SearchPanelInputBase.propTypes = {
  myCustomFunctionFromProps: PropTypes.func.isRequired,
  onValueChange: PropTypes.func.isRequired,
  value: PropTypes.string,
  getMessage: PropTypes.func.isRequired,
};
SearchPanelInputBase.defaultProps = {
  value: '',
};

export const SearchPanelInput = withStyles(styles)(SearchPanelInputBase);

最后我像这样在我想要的地方打电话

      <SearchPanel
        inputComponent={props => (
          <SearchPanelInput myCustomFunctionFromProps={this.myCustomFunctionFromProps} {...props} />
        )}
      />

但这不起作用，我的 Prop 类型说函数未定义，我怀疑 Prop 没有正确传播但我不知道如何覆盖其他组件

编辑:

我的功能

  myCustomFunctionFromProps = () => console.log('lel')

Answer 1

withComponents 不会传递您的自定义 Prop 。

它可以与多个组件一起使用:

export const Table = withComponents({ Row, Cell })(TableBase);

它只是 HOC:

    <TableBase
      rowComponent={Row}
      cellComponent={Cell}
    />

那么它应该如何知道要使用哪个自定义 Prop 呢？

您必须使用 myCustomFunctionFromProps 函数在范围内定义另一个输入包装器。

  Input2 = props => (
    <SearchPanelInput myCustomFunctionFromProps={this.myCustomFunctionFromProps} {...props} />
  )

并使用 @devexpress/dx-react-grid 中的 SearchPanel

    <SearchPanel
      inputComponent={this.Input2}
    />

你也应该改变:

onChange={() => myCustomFunctionFromProps}
myCustomFunctionFromProps={() => this.myCustomFunctionFromProps}

到:

onChange={myCustomFunctionFromProps}
myCustomFunctionFromProps={this.myCustomFunctionFromProps}

或者(虽然它是多余的):

onChange={() => myCustomFunctionFromProps()}
myCustomFunctionFromProps={() => this.myCustomFunctionFromProps()}