How to use onchange with md-outlined-text-field?

[SubhodipRoy161101]

I am trying to make a signup form and want to get the live values in react with useState. But onChange is not working with the component. How can I achieve this?

This is the code I am using.
<md-outlined-text-field style={{ margin: "0 1rem" }} label="Phone Number" type="tel" onChange={handleChange} ></md-outlined-text-field>

[asyncLiz]

I'd look over https://lit.dev/docs/frameworks/react/, which explains how to create a React component wrapper for a custom element using @lit-labs/react.

import React from 'react';
import {createComponent} from '@lit/react';
import {MdOutlinedTextField} from '@material/web/textfield/outlined-text-field';

export const OutlinedTextField = createComponent({
  tagName: 'md-outlined-text-field',
  elementClass: MdOutlinedTextField,
  react: React,
  events: {
    onChange: 'change', // Make onChange work!
  },
});

function App() {
  const [value, setValue] = useState('');

  return <OutlinedTextField label="Phone" type="tel" 
      value={value} onChange={(event) => setValue(event.target.value)} />;
}

Disclaimer: I'm writing this code from memory, so it may be slightly different. The docs should guide you through it though!

React TSX support is on our roadmap for this quarter, where we'll provide wrappers directly for you. Keep an eye out for when that comes so that you don't have to do it manually :)