使用 MUI 提交表单答案

【问题标题】：Submit form with MUI使用 MUI 提交表单
【发布时间】：2016-11-04 09:36:40
【问题描述】：

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

【问题讨论】：

标签： reactjs forms material-ui

【解决方案1】：

最好的办法是了解如何使用带有 react 的表单，然后在完成该部分后转换为材料。

这是一个很好的 react 教程，其中包括提交表单：

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

相关代码：

渲染函数 - 注意表单上的事件处理程序

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

这里是回调的实现

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: ''});

您可以通过将输入元素转换为 TextField 来将此示例转换为 material-ui

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

并使用它的酷炫功能。

本教程中介绍了其工作原理的所有详细信息

希望有所帮助 - 祝你好运！

【讨论】：

我认为这遗漏了您不能将<input type="submit"> 转换为TextField 或RaisedButton。 Material UI 组件有不同的 API（我自己还在寻找确切的答案）
嘿帕特里克，如果你还在寻找，我可以把它转换成 material -ui 并张贴出来，LMK。
我不是提问者，所以我无法选择你的答案，但你是正确的，你可以做 <RaisedButton type="submit" /> 并且该道具将传递给本机 <input> 和正常工作以提交表单。我现在在我的代码中工作了那个确切的东西。就实际回答问题而言，我认为答案的 Material UI 版本可能在技术上更正确。

【解决方案2】：

您要查找的事件是onTouchTap，需要安装react-tap-event-plugin。可以在页面顶部的here 找到相关说明。

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以查看react-hook-form 库。它会自动为您管理表单状态，您唯一需要做的就是指定每个字段的名称和验证规则（如果需要）：

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

【讨论】：