我在用着Material-UI
在我的项目中,我在控制台中收到警告:
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>
虽然没有直系后裔,
<form>
<TextField
label="Title"
value={title}
onChange={this.handleChange("title")}
className={classes.formControl}
margin="normal"
/>
<br />
<FormControl className={classes.formControl}>
<InputLabel>Muscles</InputLabel>
<Select
value={muscles}
onChange={this.handleChange("muscles")}
>
{categories.map((category, index) => {
return (
<MenuItem key="index" value={category}>
{category}
</MenuItem>
);
})}
</Select>
</FormControl>
<br />
<TextField
multiline
rows={4}
label="Description"
value={description}
onChange={this.handleChange("description")}
className={classes.formControl}
margin="normal"
/>
</form>
这是沙盒链接:
https://codesandbox.io/s/react-material-ui-0yqeo https://codesandbox.io/s/react-material-ui-0yqeo
默认elementType
为了Fab
成分是button https://material-ui.com/api/fab/#props。在您的应用程序中Fab
组件已经嵌套在Button
组件因此出现错误。这Fab
组件继承自ButtonBase
所以你应该能够删除顶层Button
组成及用途onClick
直接在上面:
<Fab
color="secondary"
aria-label="add"
size="small"
onClick={this.handleToggle}
>
<AddIcon />
</Fab>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)