Open Grewer opened 4 years ago
"@nodegui/nodegui": "^0.13.1", "@nodegui/react-nodegui": "^0.4.0",
Inside the handler just call toPlainText()
plainTextEdit.addEventListener('textChanged',()=>{
const text = plainTextEdit.toPlainText();
});
Oh wait my bad. This is for react nodegui.
In that case you ll need to use a ref to the plaintextedit component. The ref.current will contain the QPlainTextEdit instance on which you can call toPlainText()
I will work on improving this API soon.
Not sure I understand correctly, I am having trouble getting value from both LineEdit
and PlainTextEdit
. I am using functional component not sure If I can create refs there. Is there any other way?
I got till the point to get the text on changed from LineEdit Component. I used
const handleChange = useEventHandler(
{
returnPressed: () => console.log("Return pressed", phone),
textChanged: text => setPhone(text)
},
[]
);
Where phone and setPhone are useState
hooks.
If I console.log
on textChanged
event, it shows the correct entered text. but I guess hooks are not updating the value. Tried to get the value on a button click as well, that doesn't work too. What am I missing?
I am really new to Qt. took Signals reference from here
Edit: is this the same issue as #14
Hi @Sparkenstein
I am not sure about your example. since its only a small snippet of your code.
But this example works as intended.
import React, { useState } from "react";
import { Renderer, Text, View, LineEdit, Window, useEventHandler } from "@nodegui/react-nodegui";
import { QLineEditSignals } from "@nodegui/nodegui";
const App = () => {
const [state, setState] = useState<string>("");
const handler = useEventHandler<QLineEditSignals>(
{
textChanged: text => {
console.log(text);
setState(text);
}
},
[]
);
return (
<Window>
<View>
<LineEdit on={handler} />
<Text>{state}</Text>
</View>
</Window>
);
};
Renderer.render(<App />);
Yep,the state
variable works in this case, but the issue is when you try to get it from a button click event (possibly even on enter pressed). Pasting my exact code below. which prints the changing text, but on click
it doesn't print the value:
const Login = () => {
const [phone, setPhone] = useState("");
const handler = useEventHandler(
{
textChanged: (text) => setPhone(text),
},
[]
);
const clickHandler = useEventHandler(
{
clicked: () => console.log("Clicked", phone),
},
[]
);
return (
<View>
<LineEdit on={handler} />
<Text>{"Please Enter your phone"}</Text>
<Button on={clickHandler} text="Login"></Button>
<Text>{phone}</Text>
</View>
);
};
I am not using typescript. Check in the gif below, similar to your example as soon as I change my input box, the value updates, but If I click the button to get that value, I don't see it in console.log.
PS: I would like to know can I reuse the same useEventHandler
for both button and text etc? in my example I have created different eventHandlers for both.
Also in my gif, did you notice how input box and button shrinks as soon as I start typing. Do you think that's a bug on my side? it's parent has style flex: 1
and nothing else.
Yes, this is because
const clickHandler = useEventHandler(
{
clicked: () => console.log("Clicked", phone),
},
[]
);
You need to specify phone as a dependency just like how you will do with useCallback or useMemo or useEffect @Sparkenstein
const clickHandler = useEventHandler(
{
clicked: () => console.log("Clicked", phone),
},
[phone]
);
And for the size reduction. Try adding an style of width: '100%'
to the outside view
added a plaintextedit example https://github.com/nodegui/react-nodegui/pull/290
Yes, this is because
const clickHandler = useEventHandler( { clicked: () => console.log("Clicked", phone), }, [] );
You need to specify phone as a dependency just like how you will do with useCallback or useMemo or useEffect @Sparkenstein
const clickHandler = useEventHandler( { clicked: () => console.log("Clicked", phone), }, [phone] );
I spent hours until I figured this out! Haha! I can use inline events without issue, but once I turned it into an event handler hook it won't work anymore...
It would be nice if this is included in the document here! ;) https://react.nodegui.org/docs/guides/handle-events
I can get his value by textChanged
but: