Javascript 如何从devExtreme向我的自定义搜索面板发送自定义道具
因此,我想将我的自定义onChange函数传递给我的带有devextreme网格的ReactJS中的自定义插件 我的searchPanel覆盖如下:Javascript 如何从devExtreme向我的自定义搜索面板发送自定义道具,javascript,reactjs,devextreme,Javascript,Reactjs,Devextreme,因此,我想将我的自定义onChange函数传递给我的带有devextreme网格的ReactJS中的自定义插件 我的searchPanel覆盖如下: import { withComponents } from '@devexpress/dx-react-core'; import { SearchPanel as SearchPanelBase } from '@devexpress/dx-react-grid'; import { SearchPanelInput as Input } fr
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);
withComponents
不会传递您的自定义道具
它可以与几个组件一起使用:
export const Table = withComponents({ Row, Cell })(TableBase);
它只是为了:
<TableBase
rowComponent={Row}
cellComponent={Cell}
/>
并使用@devexpress/dx react grid
<SearchPanel
inputComponent={this.Input2}
/>
致:
或者(尽管是renundant):
您是否尝试过仅接收道具并使用
console.log
来了解到底传递了什么?像这样:constSearchPanelInputBase=(props)=>{console.log(props);}代码>是的,它只返回默认元素道具,如value、onValueChange、getMessage和class。您的回答很有道理,但我的道具和自定义功能在我记录它们时仍然返回未定义的。更新了我的问题,您从devexpress/dx react grid
导入了SearchPanel
?操作,我完全错过了导入!现在一切都按计划进行了!
<TableBase
rowComponent={Row}
cellComponent={Cell}
/>
Input2 = props => (
<SearchPanelInput myCustomFunctionFromProps={this.myCustomFunctionFromProps} {...props} />
)
<SearchPanel
inputComponent={this.Input2}
/>
onChange={() => myCustomFunctionFromProps}
myCustomFunctionFromProps={() => this.myCustomFunctionFromProps}
onChange={myCustomFunctionFromProps}
myCustomFunctionFromProps={this.myCustomFunctionFromProps}
onChange={() => myCustomFunctionFromProps()}
myCustomFunctionFromProps={() => this.myCustomFunctionFromProps()}