score:1
Accepted answer
yes you need to save value in state. and when user click on subscribe
fetch that value from state
. here is updated code:
import react from "react";
import button from "@material-ui/core/button";
import textfield from "@material-ui/core/textfield";
import dialog from "@material-ui/core/dialog";
import dialogactions from "@material-ui/core/dialogactions";
import dialogcontent from "@material-ui/core/dialogcontent";
import dialogcontenttext from "@material-ui/core/dialogcontenttext";
import dialogtitle from "@material-ui/core/dialogtitle";
import form from "semantic-ui-react";
export default function formdialog() {
const [open, setopen] = react.usestate(false);
const [value, setvalue] = react.usestate("hello");
const handleclickopen = () => {
setopen(true);
};
const handleclose = () => {
setopen(false);
};
return (
<div>
<button variant="outlined" color="primary" onclick={handleclickopen}>
open form dialog
</button>
<dialog
open={open}
onclose={handleclose}
aria-labelledby="form-dialog-title"
>
<dialogtitle id="form-dialog-title">subscribe</dialogtitle>
<dialogcontent>
<dialogcontenttext>
to subscribe to this website, please enter your email address here.
we will send updates occasionally.
</dialogcontenttext>
<textfield
autofocus
margin="dense"
id="name"
label="application name"
type="text"
value={value}
onchange={(e) => setvalue(e.target.value)}
fullwidth
/>
</dialogcontent>
<dialogactions>
<button onclick={handleclose} color="primary">
cancel
</button>
<button onclick={handleclose} color="primary">
subscribe
</button>
</dialogactions>
</dialog>
</div>
);
}
here is the demo: https://codesandbox.io/s/material-demo-forked-ln0xe?file=/demo.js:0-1824
Source: stackoverflow.com
Related Query
- Unable to edit form when loaded with values using Semantic UI React
- How to edit a form when it is loaded with values?
- How I can get post values in edit with React/Redux form in React
- How can I safely set new state of a component when props change with useEffect (for an edit form modal component)?
- How to get values from react FieldArray in formik form with other fields?
- How to load React-select Async with initial options for edit item function when using a search API?
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How to set cookie with values from url before js is loaded
- How do I perform a POST request only when form is validated with react-hook-form?
- How to wait until object is fully loaded when fetching with async/await in React
- How do I use startsWith with a form submission when filtering array data from an API in React?
- How to add a <Field /> when a button is clicked inside a Form with React & Formik?
- How I can access the values from a form made via Reactbootstrap when a user clicks submit button, am I unable to grab the values
- How to implement edit form with file upload
- How to reset other values when one is introduced in React with react-hook-form
- How to compare if two inputs values are the same in form validation with onChange
- react-router v3: How to load data for the component when the same route with different query params is loaded
- How to keep previous values when updating array in React with useState
- How to create contact form with ReactJS and send the values with API - Express
- How to create a signup form with React and Why won't a function be executed when called insight a form after input field?
- Making and edit form - How set default input values in a CreatableSelect (React-select)
- Reactjs- How to navigate edit button to edit form with an id
- How to set values in a multi-step Formik form with components that implement useField()
- How to update multiple form values with one reducer action?
- I want to call the same popup with input fields when I click on edit button which is inside that popup, how can I do this (if possible)?
- How to maintain latest callback values when using React hooks with observables?
- How can I trigger the right form action when the user hits enter, in a form with multiple buttons?
- How to validate field when rendering same field multiple time with different name id in redux form
- How to get redux-form FieldArray text field to have readonly with initial values but not when a new field.push is clicked?
- How to capture search params in react when I search with form action="/search"?
More Query from same tag
- RTK Query reset
- pass props to selectors to filter based on that props
- how to display the title in the middle of a donut chart with legend?(react-highcharts)
- Best practice to handle errors in Redux and React
- Nginx config to redirect myserver.com to Tableau tabserver.com on login and logout
- `this.props` inside `getDefaultProps()` of React?
- How can I filter data by any property within an array of objects?
- Scrolling only side menu div and others should be fixed when menu is open
- Identifying the input checked from multiple checkboxes in react code and storing them inside an empty array
- Jest & React & Typescript & React-Testing-Library error
- How to override selected MenuItem style?
- How to pass props and call functions from "parent" to "child" in stateless component reactjs
- How to setup redux saga
- How can i import more than one component from the same folder?
- Babel-Loader Syntax error on npm run build
- How to pass prop to img src require in React/Next.js
- typescript 3.0 and react defaultProps
- Use the call function of d3js on a react app
- Updating parent component state from child component
- loop adding component in reactjs
- What is the correct way to pass props to component in React?
- Meteor React Error: Cannot read property '0' of undefined
- getting error : fetch errorSyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data in react ajax call
- Implementing redux-persist
- Unexpected token import - Electron/React
- Toastify Reactjs adding a link
- Make child element of Link not route
- How to make my import react Calendar project english only?
- How to add clicklable padding to Draft js editor
- How to combine multiple inline style objects?