Comments (12)
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]
);
from react-nodegui.
And for the size reduction. Try adding an style of width: '100%'
to the outside view
from react-nodegui.
"@nodegui/nodegui": "^0.13.1",
"@nodegui/react-nodegui": "^0.4.0",
from react-nodegui.
Inside the handler just call toPlainText()
plainTextEdit.addEventListener('textChanged',()=>{
const text = plainTextEdit.toPlainText();
});
from react-nodegui.
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()
from react-nodegui.
I will work on improving this API soon.
from react-nodegui.
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?
from react-nodegui.
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
from react-nodegui.
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 />);
from react-nodegui.
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.
from react-nodegui.
added a plaintextedit example #290
from react-nodegui.
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
from react-nodegui.
Related Issues (20)
- Bad URL Protocol C: when running on Windows.
- react nodegui call stack exceeded error when using GridView/ BoxView components HOT 5
- What should I use to manipulate audio in react nodegui? HOT 1
- Running for the second time no Macbook M1 HOT 3
- [Question] How do I use an SVG as an app background?
- It seems that react third-party component libraries are not supported HOT 1
- RNList and FlexLayout
- process dlopen: Cannot find symbol in flat namespace
- Can I create Intel windows binary on Apple Arm M1 machine ?
- libQt5Core.so.5: version `Qt_5.15' not found
- Cannot receive close event of FileDialog HOT 2
- Can I create submenus for System Tray Menu Actions?
- Is List component same as FlatList (efficient renderer)?
- Frameless window
- qmenubar.setCornerWidget
- Getting selected text in PlainTextEdit
- QTableWidget support
- This project is unmaintained
- Add windowGeometryChanged to QMainWindowSignals to track window changes. HOT 1
- was this project die?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-nodegui.