使用 Material UI 提交表单

Question

我正在尝试在 Material UI 中构建一个简单的表单，并使用登录名和密码

TextField

以及

Button

来提交表单。处理

Button

上的事件并提交表单的最佳方式是什么？

Answer 1

将

type="submit"

添加到 Material UI 按钮元素，例如 RaishedButton，单击时它将用作提交按钮。当表单提交时，会触发表单上的 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>
     )
  }
}

Answer 2

您最好的选择是学习如何使用带有 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

并使用它的酷功能。

本教程涵盖了其工作原理的所有细节

希望有帮助 - 祝你好运！

Answer 3

您可以查看 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>
);

Answer 4

我也尝试过同样的事情，请在下面找到我的解决方案：

Step1：用标签封装表格。 Step2: 添加 type="submit" 到按钮。

希望它对你有用！

Answer 5

您要查找的活动是

onTouchTap

，需要安装

react-tap-event-plugin

。有关此操作的说明可以在页面顶部的此处找到。

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

希望这有帮助。