Submit form with Material UI

Question

I am trying to build a simple form in Material UI with login and password TextField and a Button to submit the form. What's the best way to handle events on the Button and submit the form?

Answer 1

Add type="submit" to a Material UI button element, such as a RaisedButton, and it will work as a submit button when clicked on. When the form is submitted, it will trigger the onSubmit on the form and run the handleSubmit callback.

class MyForm extends React.Component {
  constructor() {
     super();
     this.state = {id: null};
  }
  handleChange = (event) => {
     this.setState({id: event.target.value});
  }
  handleSubmit = (event) => {
     //Make a network call somewhere
     event.preventDefault();
  }
  render() {
     return( 
        <form onSubmit={this.handleSubmit}>
          <TextField floatingLabelText="ID Number" onChange={this.handleChange} />      
          <RaisedButton label="Submit" type="submit" />
        </form>
     )
  }
}

Answer 2

Your best bet is to learn about using forms with react, then convert over to material once you have that part down.

Here is a good tutorial from react that includes submitting a form:

https://facebook.github.io/react/docs/tutorial.html

Relevant Code:

Render Function - Note the event handler on the form

render: function() {
return (
  <form className="commentForm" onSubmit={this.handleSubmit}>
    <input
      type="text"
      placeholder="Your name"
      value={this.state.author}
      onChange={this.handleAuthorChange}
    />
    <input
      type="text"
      placeholder="Say something..."
      value={this.state.text}
      onChange={this.handleTextChange}
    />
    <input type="submit" value="Post" />
  </form>
);

And here is the implementation of the callback

handleSubmit: function(e) {
e.preventDefault();
var author = this.state.author.trim();
var text = this.state.text.trim();
if (!text || !author) {
  return;
}
// TODO: send request to the server
this.setState({author: '', text: ''});

},

You can convert this sample over to material-ui by converting the input elements to TextField

http://www.material-ui.com/#/components/text-field

And use the cool features of it.

All of the details of how this works are covered in the tutorial

Hope that helps - good luck!

Answer 3

You can have a look at react-hook-form library. It manages the form state for you automatically, the only thing you need to do is specify the name for each field and validation rule if needed:

const { register, handleSubmit } = useForm();
const onSubmit = (data) => alert(JSON.stringify(data, null, 4));

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <Stack m={2} spacing={3}>
      <TextField label="First Name" inputProps={register('firstName')} />
      <TextField label="Last Name" inputProps={register('lastName')} />

      <TextField select label="Gender" inputProps={register('gender')}>
        <MenuItem value="male">Male</MenuItem>
        <MenuItem value="female">Female</MenuItem>
        <MenuItem value="furry">Furry</MenuItem>
      </TextField>

      <FormControlLabel
        control={<Checkbox />}
        label="Is developer?"
        {...register('isDeveloper')}
      />

      <Button variant="contained" type="submit">
        submit
      </Button>
    </Stack>
  </form>
);

Answer 4

The event you're looking for is onTouchTap and requires installing the react-tap-event-plugin. The instructions for this can be found here at the top of the page.

<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} />

Hope this helps.