我阅读了 Material-UI 并尝试将两个组件 sid 并排制作,这是我理解的默认设置,但无论我尝试什么,它看起来都是这样的:
Material Grid 拒绝水平放置,即使它是默认行为。我什至尝试过像这样的超级简单的东西:
<Grid container>
<Grid item xs={6} sm={2} md={8} lg={12} xl={3} style={{background:randomColor()}}>
Hooray something is here!
</Grid>
<Grid item xs={6} sm={10} md={4} lg={12} xl={9} style={{background:randomColor()}}>
Hooray something is too!
</Grid>
</Grid>
该代码垂直写入文本。
这是我的代码。我一定是做错了什么,但我看不到。
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import Input from "../components/input/Input";
import Button from "../components/button/Button";
import { withStyles } from "@material-ui/styles";
import { Grid, Page, Container, makeStyles } from "@material-ui/core";
import { actionCreators, clearPosts } from "../redux/books/books.action";
import EnhancedTable from "./Logger";
const marginStyle = {
marginTop: "30px",
};
const styles = (theme) => ({
root: {
flexGrow: 1,
},
productCard: {
height: "100%",
},
border: {
bgcolor: "background.paper",
borderColor: "text.primary",
m: 1,
border: 1,
style: { width: "5rem", height: "5rem" },
},
});
class FormContainer extends Component {
constructor(props) {
super(props);
this.state = {
localBook: {
title: "",
author: "",
genre: "",
price: "",
},
};
this.handleTitle = this.handleTitle.bind(this);
this.handleAuthor = this.handleAuthor.bind(this);
this.handleGenre = this.handleGenre.bind(this);
this.handlePrice = this.handlePrice.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleClearForm = this.handleClearForm.bind(this);
}
handleTitle(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
title: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleAuthor(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
author: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleGenre(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
genre: value,
},
}),
() => console.log(this.state.localBook)
);
}
handlePrice(e) {
let value = e.target.value;
this.setState(
(prevState) => ({
localBook: {
...prevState.localBook,
price: value,
},
}),
() => console.log(this.state.localBook)
);
}
handleFormSubmit(e) {
e.preventDefault();
this.props.actionCreators.requestBooks(this.state.localBook);
}
handleClearForm(e) {
e.preventDefault();
this.props.clearPosts();
this.setState({
localBook: {
title: "",
author: "",
genre: "",
price: "",
},
});
}
render() {
const { classes } = this.props;
return (
<Container maxWidth={false}>
<Grid item xs={12}>
<Grid container className={classes.root} justify="center" spacing={3}>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<div style={marginStyle}>
<form
className="container-fluid"
onSubmit={this.handleFormSubmit}
>
<Input
inputtype={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handlechange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputtype={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handlechange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputtype={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Enter Genre"}
handlechange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputtype={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Enter Price"}
handlechange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid item lg={6} sm={6} xl={6} xs={12}></Grid>
<EnhancedTable />
</Grid>
</Grid>
</Container>
);
}
}
const buttonStyle = {
margin: "10px 10px 10px 10px",
};
// const mapDispatchToProps = dispatch => ({
// setUserRoleToUser: () => dispatch(clearPosts()),
// });
function mapDispatchToProps(dispatch) {
return {
actionCreators: bindActionCreators(actionCreators, dispatch),
clearPosts: () => dispatch(clearPosts()),
};
}
export default connect(
null,
mapDispatchToProps
)(withStyles(styles)(FormContainer));
答案 0 :(得分:1)
首先,Grid 项应始终由 Grid 容器包装。所以你应该在你的容器之后移除 <Grid item xs={12}>
或者用另一个带有容器标签的 Grid 包裹它。
除此之外,应该共享一行的网格必须彼此相邻。这意味着您必须使用 EnhancedTable 组件移动您的网格。您的代码将如下所示:
...
class FormContainer extends Component {
...
render() {
const { classes } = this.props;
return (
<Container maxWidth={false}>
<Grid container className={classes.root} justify="center" spacing={3}>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<div style={marginStyle}>
<form
className="container-fluid"
onSubmit={this.handleFormSubmit}
>
<Input
inputtype={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handlechange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputtype={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handlechange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputtype={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Enter Genre"}
handlechange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputtype={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Enter Price"}
handlechange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>
</Grid>
<Grid item lg={6} sm={6} xl={6} xs={12}>
<EnhancedTable />
</Grid>
</Grid>
</Container>
);
}
}
...