我使用Material UI对话框创建了一个表单列表.在官方 case 中:
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
open={this.state.open}
>
This dialog spans the entire width of the screen.
</Dialog>
行动是:
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
onTouchTap={this.handleClose}
/>,
];
如何构建表单并让Dialog提交表单数据?
------------------------------------------------更新-----------------------------------------------
还有一个答案:
在对话框操作按钮中添加属性type
和form
:
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
onTouchTap={this.handleClose}
type="submit" //set the buttom type is submit
form="myform" //target the form which you want to sent
/>,
];
并在对话框中为窗体指定属性id:
<Dialog
title="Dialog With Custom Width"
actions={actions}
modal={true}
open={this.state.open}
>
// here can put child component and the code still work even the form is in the child component
<div className="deal_form">
<form id="myform" onSubmit = {this.handleCreate} >
<TextField value={this.state.staff_number} />
</form>
</div>
</Dialog>