import * as React from "react";
import Button from "@material-ui/core/Button";
import * as propTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import "./App.css";
import PageTwo from "./components/PageTwo";
const styles = theme => ({
container: {
display: "flex",
flexWrap: "wrap"
},
textField: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
width: 200
},
menu: {
width: 200
}
});
export interface Items {
objectID?: string;
URL?: string;
}
export interface IPropsk {
data?: Array<Items>;
fetchData?(value: string): void;
}
export interface IState {
isLoaded: boolean;
hits: Array<Items>;
value: string;
}
const API = "https://hn.algolia.com/api/v1/search?query=";
export class App extends React.Component<IPropsk, IState> {
constructor(props: IPropsk) {
super(props);
this.state = {
isLoaded: false,
hits: [],
value: ""
};
render() {
return (
<div>
<div>
<TextField
id="required"
label="Required"
defaultValue="Hello World"
margin="dense"
value={this.state.value}
onChange={this.handleChange}
/>
<Button
variant="contained"
color="primary"
onClick={() => this.fetchData(this.state.value)}
>
Search
</Button>
</div>
<div>
<PageTwo data={this.state.hits} />
</div>
</div>
);
}
}
export default withStyles(styles)(App);
我在上面的代码段中编写了调用方法fetchData的操作,单击按钮即可。但是当我应用MateriaUI更改组件的样式时(我只想更改文本字段和按钮t的大小),我想访问样式组件中的类。如何从文本字段访问它