in this example, click in the text box, then press tab to focus the button, then press enter to activate the button onClick. you get the alert box, but now just press enter and watch the value in the text box increase
the LinkButton focus remains and accepts the keystrokes, even though the dialog appears modal and the button can't be clicked.
import React, { useRef, useState } from 'react';
import './App.css';
import { Form, FormField, LinkButton, Messager, TextBox } from 'rc-easyui';
function App() {
const messager = useRef();
const [model, setModel] = useState({
myBox:0
});
function onClick() {
setModel({
myBox: parseInt(model.myBox)+1
})
messager.current.alert({
title: "Clicked",
msg: "now press enter"
});
}
return (
<div className="App">
<Form
errorType="tooltip"
model={model}
labelWidth={120}
labelAlign="right"
>
<FormField name="myBox" label="Box:">
<TextBox value={model.myBox} tabIndex={1} />
</FormField>
<FormField >
<LinkButton onClick={onClick} >Tab to here and press enter</LinkButton>
</FormField>
</Form>
<Messager ref={messager}></Messager>
</div>
);
}
export default App;