这是我的代码:
const cookies = new Cookies();
var name = (cookies.get('name'));
var key = (cookies.get('key'));
console.log(key);
const theme = createMuiTheme({
palette: {
primary: amber,
secondary: blue
},
root: {
flexGrow: 1,
},
bottomView: {
width: '25%',
height: 50,
backgroundColor: '#FF9800',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
bottom: 0
},
});
class Base {
constructor() {}
}
class Homework extends Base {
constructor() {
super();
this.state = {
topicBox: null,
payloadBox: null
};
this.publish = this.publish.bind(this);
this.handleChange = this.handleChange.bind(this);
}
publish(event) {
this.setState({value: event.target.value});
}
handleChange(event) {
this.setState({value: event.target.value});
}
async loadTest() {
try {
//grab courses
const response = await fetch('https://classroom.googleapis.com/v1/courses?access_token=' + key);
const json = await response.json();
//coursemax vars will eventually be user defined
var coursemax = [2, 2, 2, 2, 2, 2, 2, 2];
if (json.courses != null) {
for (var course = 0; course < json.courses.length && course < 9; course++) {
//grab course info
var coursework = await fetch('https://classroom.googleapis.com/v1/courses/' + json.courses[course].id + '/courseWork?access_token=' + key);
var coursejson = await coursework.json();
console.log(coursejson);
var assignment = "";
for (var assignmentnum in coursejson.courseWork) {
if (assignmentnum <= coursemax[course] - 1) {
//add in assignment
assignment += "<p>" + coursejson.courseWork[assignmentnum].title + "</p>";
//"Due: "+coursejson.courseWork[assignmentnum].dueDate.month+"/"+coursejson.courseWork[assignmentnum].dueDate.day
}
}
//making ids to render
document.getElementById('class' + (course + 1) + 'info').innerHTML = assignment;
document.getElementById('class' + (course + 1)).innerHTML = json.courses[course].name + '</b>' + ':' + '<br/>';;
}
}
} catch (err) {
console.log(err);
}
}
}
var app = new Homework();
var config = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
firebase.initializeApp(config);
app.loadTest();
function publish() {
console.log(this.state.topicBox, this.state.payloadBox);
const itemsRef = firebase.database().ref('Users');
const item = {
title: this.state.topicBox,
user: this.state.payloadBox
}
itemsRef.push(item).set("name");
this.setState({
topicBox: '',
payloadBox: ''
});
}
const LoginPage = () =>
<MuiThemeProvider theme={theme}>
<div>
<AppBar position="static" id='title'>
<Toolbar>
<Typography type="title" color='inherit'>
MVHS Homework App
</Typography>
<div id='avatar' color='inherit'><Avatar>{name[0]}</Avatar></div>
</Toolbar>
</AppBar>
<input
type="text"
name="topicBox"
placeholder="Name"
value={ this.state.topicBox }
onChange={ this.handleChange }
/>
<input
type="text"
name="payloadBox"
placeholder="Details"
value={ this.state.payloadBox }
onChange={ this.handleChange }
/>
<Button variant="raised" color="secondary" style = {theme.bottomView} onClick={ this.publish }>
Secondary
</Button>
</div>
</MuiThemeProvider>
export default LoginPage
在上面的代码中,出现错误:
this.setState({value:event.target.value});
错误是:
TypeError:this.setState不是函数
为什么会这样?
编辑: 我认为错误是目前代码的唯一问题。如果有任何错误,请随时告诉我。 :)(我还没有正确建立汽车吗?)
编辑: 此代码是否会将带有已编辑文本输入的值发送到数据库?
答案 0 :(得分:1)
您需要使用Component扩展您的作业。而且你也试图用名为“value”的未知键设置状态
import React,{ Component } from 'react';
class Homework extends Component {
constructor(props) {
super(props);
this.state = {
topicBox: null,
payloadBox: null
};
this.publish = this.publish.bind(this);
this.handleChange = this.handleChange.bind(this);
}
publish(e) {
const { name, value } = e.target;
this.setState({ [name]: value}); // this will set your state of current input, that you were handling
//this.setState({value: event.target.value});
}
handleChange(e) {
const { name, value } = e.target;
this.setState({ [name]: value})
//this.setState({value: event.target.value});
}
render(){
return(
// your code
<div>
<LoginPage handleChange={this.state.handleChange} publish={this.state.publish} topicBox={this.state.topicBox} payloadBox={this.state.payloadBox} />
</div>
)
}
}
这是您的功能组件,因为您正试图改变您的状态。您无法在功能组件内直接从此处更改状态。实际上,您可以将函数(handleChange和publish)作为prop传递给功能组件(LoginPage)。您可以使用以下链接作为参考https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541
// here you can access the function as props. ie the Homework component passed its state such as topicBox, payloadBox, handleChange function and publish function as a props to LoginPage functional component. Here you can access it by using props.handleChange (which is the prop name mentioned in Homework component)
export const LoginPage = (props) =>
<MuiThemeProvider theme={theme}>
<div>
<AppBar position="static" id='title'>
<Toolbar>
<Typography type="title" color='inherit'>
MVHS Homework App
</Typography>
<div id='avatar' color='inherit'><Avatar>{name[0]}</Avatar></div>
</Toolbar>
</AppBar>
<input
type="text"
name="topicBox"
placeholder="Name"
value={ props.topicBox }
onChange={ props.handleChange }
/>
<input
type="text"
name="payloadBox"
placeholder="Details"
value={ props.payloadBox }
onChange={ props.handleChange }
/>
<Button variant="raised" color="secondary" style = {theme.bottomView} onClick={props.publish }>
Secondary
</Button>
</div>
</MuiThemeProvider>