I'm trying to execute a function when a user press Command+Enter but my parent state value became it's default value when I use exec from the editor commands array.
The part that I don't understand is that when I execute my function from a button it works, my state is correct.
Sample code to reproduce your issue
EditorParent.jsx
const [value, setValue] useState('' as string);
const doSomething = () => {
handle(value) // value will be `''` if I use the `exec` method from the ace editor, but the correctly set value when executed from the button.
}
return <Editor value={value} setValue={setValue} doSomething={doSomething} />
Editor.jsx
function Editor({ value, setValue, doSomething }) {
<AceEditor
// ...
onChange=(newValue => setValue(newValue))
value={value}
commands={[
{
name: 'doSomething',
bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
exec: () =>
doSomething(), // value will be `''`
},
]}
/>
<Button
onClick={() => doSomething()} // value will be correct
>
Execute
</Button>
}
Problem
I'm trying to execute a function when a user press
Command+Enter
but my parent state value became it's default value when I useexec
from the editor commands array.The part that I don't understand is that when I execute my function from a button it works, my state is correct.
Sample code to reproduce your issue
EditorParent.jsx
Editor.jsx