我正在使用ag-grid进行记录编辑。
如何制作一个按箭头和Enter键不执行任何操作的单元格编辑器。
类似于此代码，但具有react-select组件
import React, { Component } from 'react'
import TextField from '@material-ui/core/TextField'
class TextCellEditor extends Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
onKeyDown(event) {
if (event.keyCode === 39 || event.keyCode === 37) {
event.stopPropagation();
}
}
afterGuiAttached(param) {
if (this.textInput) this.textInput.current.focus();
}
getValue() {
return this.textInput.current.value;
}
isPopup(){
return true
}
isCancelAfterEnd(){
return false
}
componentDidMount() {
this.textInput.current.addEventListener('keydown', this.onKeyDown);
}
render() {
return (
<TextField
defaultValue={this.props.value}
inputProps={{
ref:this.textInput
}}
/>
);
}
}
export default TextCellEditor
我尝试使用refs和addeventListener，但是它不起作用，这是我当前的react-select单元格编辑器代码
import React, { Component } from 'react'
import CreatableSelect from "react-select/lib/Creatable"
import { components } from 'react-select'
import axios from "axios"
import Cookies from 'js-cookie'
import IconButton from '@material-ui/core/IconButton'
import EditIcon from '@material-ui/icons/Edit'
import ReactDOM from 'react-dom'
//redux
import { connect } from 'react-redux'
import {
setNotification,
updateFullRecord,
pushBreadcrumbs,
pushFullRecord,
setCFI,
setFullView,
pushModalRecord,
setModalView,
setCMI,
toggleModal,
}
from '../../../actions/ActivityActions'
class ReactSelectCellEditor extends Component {
constructor(props) {
super(props);
this.state = {
selected : {
value : "",
labal : ""
},
suggestion :[]
}
this.handleChange = this.handleChange.bind(this)
this.MTORef = React.createRef();
this.InputRef = React.createRef();
console.log("cell editor props:",this.props)
}
componentDidMount() {
axios.post(this.props.host+"/api/"+this.props.model+"/options", {
search : "",
limit : 10
},{
headers: {
Authorization: "Bearer "+Cookies.get("accessToken")
}
})
.then(response => {
var arr = response.data.records
var result = arr.map(record =>({
label :record[this.props.fieldAsLabel],
value: record[this.props.fieldAsValue]
}))
this.setState({
suggestion : [
...result
]
})
})
}
getLabel=(id)=>{
axios.get(this.props.host+"/api/"+this.props.model+"/"+id,{
headers:{
Authorization:"Bearer "+Cookies.get("accessToken")
}
})
}
handleClickEdit = () => {
axios.post(this.props.host+"/api/"+this.props.model+"/"+this.state.selected.value, {
search : this.state.selected.value,
limit : 10
},{
headers: {
Authorization: "Bearer "+Cookies.get("accessToken")
}
}).then((response)=>{
this.props.pushModalRecord({
...response.data,
formMode:"edit",
_modal:true
})
this.props.saveFormState()
this.props.setModalView(this.props.form)
this.props.setCMI(this.props.Activity.currentModalIndex+1)
this.props.toggleModal()
})
}
handleCreateOption = (inputValue:any) => {
this.props.pushModalRecord({
[this.props.fieldAsLabel]:inputValue,
formMode:"create",
_modal:true
})
this.props.saveFormState()
this.props.setModalView(this.props.form)
this.props.setCMI(this.props.Activity.currentModalIndex+1)
this.props.toggleModal()
}
handleChange(selected){
selected = selected === null?"":selected
this.setState({
selected : {
label : selected.label,
value : selected.value
}
})
}
onKeyDown(event) {
let key = event.which || event.keyCode;
if (key === 37 || // left
key === 39) { // right
event.stopPropagation();
}
}
afterGuiAttached(param) {
this.SelectRef.focus()
}
getValue() {
return this.state.selected.value
}
isPopup() {
return true
}
render() {
return (
<div>
<div style={{minWidth:"200px",display:"flex"}}>
<div style={{width:"160px"}}>
<CreatableSelect
isLoading = {false}
options = {this.state.suggestion}
defaultValue = {this.props.value !== undefined?{
label:this.props.label,
value:this.props.value
}:null}
onChange = {this.handleChange}
onKeyDown = {event=>this.onKeyDown(event)}
onCreateOption = {this.handleCreateOption}
ref = { ref => { this.MTORef = ref }}
isClearable
/>
</div>
{this.props.editable?<IconButton onClick={()=>this.handleClickEdit()}>
<EditIcon/>
</IconButton>:""}
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
Global :state.GlobalReducer,
Activity :state.ActivityReducer
}
}
const mapDispatchToProps = (dispatch) => {
return {
setNotification: (isOpen,message,color)=>{
dispatch(setNotification(isOpen,message,color))
},
updateFullRecord: (data,index) => {
dispatch(updateFullRecord(data,index))
},
setCFI: (index) => {
dispatch(setCFI(index))
},
pushFullRecord: (record) => {
dispatch(pushFullRecord(record))
},
setFullView: (path) => {
dispatch(setFullView(path))
},
pushBreadcrumbs: (data) => {
dispatch(pushBreadcrumbs(data))
},
toggleModal : () => {
dispatch(toggleModal())
},
pushModalRecord : (data) => {
dispatch(pushModalRecord(data))
},
setModalView : (path) => {
dispatch(setModalView(path))
},
setCMI : (data) => {
dispatch(setCMI(data))
},
}
}
export default connect(mapStateToProps,mapDispatchToProps,null,{ forwardRef: true })(ReactSelectCellEditor)
答案 0 :(得分：0)
您可以使用suppressKeyboardEvent回调忽略箭头，并输入整个网格或特定单元格的键。如果网格抑制了事件，则回调应返回true，否则应返回false来继续正常进行。
回调具有以下签名：
导出接口SuppressKeyboardEventParams扩展了IsColumnFuncParams {
// the keyboard event the grid received. inspect this to see what key was pressed
event: KeyboardEvent;
// whether the cell is editing or not. sometimes you might want to suppress event
// only when cell is editing.
editing: boolean;
node: RowNode; // row node
data: any; // row data
column: Column; // column
colDef: ColDef; // column definition
context: any; // context object
api: GridApi | null | undefined; // grid API
columnApi: ColumnApi | null | undefined; // column API
}
回叫功能可能看起来像这样-
function suppressEnterArrow(params) {
let KEY_LEFT = 37;
let KEY_UP = 38;
let KEY_RIGHT = 39;
let KEY_DOWN = 40;
let KEY_ENTER = 13;
let ignoredKeys = [KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_ENTER, KEY_DOWN];
var event = params.event;
var key = event.which;
var suppress = ignoredKeys.include(key) && params.editing &&
params.colDef.cellEditor === <Your Text Cell Editor>;
return suppress;
}
您可以在此处详细了解-https://www.ag-grid.com/javascript-grid-keyboard-navigation/#suppressKeyboardEvents