使用 MUI 提交表单

Question

我正在尝试使用登录名和密码 TextField 和 Button 在 MUI 中构建一个简单的表单来提交表单。处理 Button 上的事件并提交表单的最佳方式是什么？

原文由 kprim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将 type="submit" 添加到 Material UI 按钮元素，例如 RaisedButton ，单击时它将用作提交按钮。提交表单时，它将触发表单上的 onSubmit 并运行 handleSubmit 回调。

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

原文由 Adam Prax 发布，翻译遵循 CC BY-SA 4.0 许可协议