How to get value for PlainTextEdit?

[Grewer]

export interface QLineEditSignals extends QWidgetSignals {
    // omit rest
    textChanged: (text: string) => void;
}

I can get his value by textChanged

but:

export interface QPlainTextEditSignals extends QAbstractScrollAreaSignals {
    textChanged: () => void;
    blockCountChanged: (blockCount: number) => void;
    copyAvailable: (yes: boolean) => void;
    cursorPositionChanged: () => void;
    modificationChanged: (changed: boolean) => void;
    redoAvailable: (available: boolean) => void;
    selectionChanged: () => void;
    undoAvailable: (available: boolean) => void;
}

[Grewer]

"@nodegui/nodegui": "^0.13.1", "@nodegui/react-nodegui": "^0.4.0",

[a7ul]

Inside the handler just call toPlainText()

plainTextEdit.addEventListener('textChanged',()=>{
  const text =  plainTextEdit.toPlainText();
});

[a7ul]

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()

[a7ul]

I will work on improving this API soon.

[Sparkenstein]

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?

[Sparkenstein]

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

[a7ul]

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 />);

[Sparkenstein]

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.

[a7ul]

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]
  );

[a7ul]

And for the size reduction. Try adding an style of width: '100%' to the outside view

[jswhisperer]

added a plaintextedit example https://github.com/nodegui/react-nodegui/pull/290

[shenghan97]

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