Originally published at https://thomasstep.dev/blog/making-a-form-in-material-ui-with-textfield-and-button
While working on my side project, I came across the need to have a form where some sort of text was given as input and when a button was clicked that input was captured and used in a subsequent API call. It turns out that the solution I went with was fairly easy to understand, but I wanted to make note of it either way.
Keep in mind that I am using Next.js/React and Material UI for this. The solution's code is below, but I will explain it first. I used a combination of React state and event listeners to accomplish this. First comes the form components themselves, a TextField
and Button
from Material UI. Next comes the state needed to hold onto the input given, which I just called textFieldInput
. The TextField
has an onChange
event listener which captures anything that is given as input. I wrote a handler for this to simply update the textFieldInput
state value with whatever is in the TextField
. Next comes the onClick
listener for the Button
. Whenever that is clicked, I simply pull the value of textFieldInput
out of the state and then I can use the current value that the user typed into the TextField
. Voila.
class FormClass extends React.Component {
constructor(props) {
super(props);
this.state = {
textFieldInput: '',
};
this.doSomethingWithInput = this.doSomethingWithInput.bind(this);
this.handleTextFieldChange = this.handleTextFieldChange.bind(this);
}
handleTextFieldChange(event) {
event.preventDefault();
this.setState({
textFieldInput: event.target.value,
});
}
doSomethingWithInput(event) {
event.preventDefault();
const {
textFieldInput,
} = this.state;
// Use textFieldInput
}
render() {
return(
<>
<TextField id="filled-basic" label="Email" variant="filled" onChange={(e) => this.handleTextFieldChange(e)} />
<Button
variant="contained"
startIcon={<AddIcon />}
onClick={(e) => this.doSomethingWithInput(e)}
/>
</>
);
}
}
Top comments (0)