我试图在Material UI中构建一个简单的表单,使用登录名和密码TextField以及Button来提交表单。在Button上处理事件和提交表单的最佳方式是什么?
TextField
Button
vhipe2zx1#
你可以看看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> );
wwtsj6pe2#
您要查找的事件是onTouchTap,需要安装react-tap-event-plugin。有关此操作的说明可在页面顶部找到。
onTouchTap
react-tap-event-plugin
<RaisedButton label="Default" style={style} onTouchTap={yourEventHandler} />
希望这能帮上忙。
carvr3hs3#
将type="submit"添加到Material UI按钮元素中,例如 RaisedButton,单击时它将作为提交按钮工作。当表单提交时,它将触发表单上的onSubmit并运行 handleSubmit 回调。
type="submit"
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> ) } }
8i9zcol24#
你最好的办法是学习如何使用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-uihttp://www.material-ui.com/#/components/text-field并使用它的酷功能。本教程中介绍了这一操作的所有细节希望能帮上忙-祝你好运!
4条答案
按热度按时间vhipe2zx1#
你可以看看react-hook-form库。它会自动为您管理表单状态,您唯一需要做的就是指定每个字段的名称和验证规则(如果需要):
wwtsj6pe2#
您要查找的事件是
onTouchTap
,需要安装react-tap-event-plugin
。有关此操作的说明可在页面顶部找到。希望这能帮上忙。
carvr3hs3#
将
type="submit"
添加到Material UI按钮元素中,例如 RaisedButton,单击时它将作为提交按钮工作。当表单提交时,它将触发表单上的onSubmit并运行 handleSubmit 回调。8i9zcol24#
你最好的办法是学习如何使用react的表单,然后在你完成这一部分后转换为材料。
这里有一个来自react的很好的教程,包括提交表单:
https://facebook.github.io/react/docs/tutorial.html
相关代码:
渲染函数-注意窗体上的事件处理程序
这里是回调的实现
},
通过将输入元素转换为TextField,可以将此示例转换为material-ui
http://www.material-ui.com/#/components/text-field
并使用它的酷功能。
本教程中介绍了这一操作的所有细节
希望能帮上忙-祝你好运!