Forms NextJS:表单数据不是';t发送到express服务器
我正在尝试在Nextjs/express应用程序中将表单数据发送到服务器。当我按“提交”时,我看不到任何输出被发送到服务器 我尝试了下面的代码,但没有成功,我不明白为什么它不起作用,因为我是这个堆栈的新手 index.jsForms NextJS:表单数据不是';t发送到express服务器,forms,express,next.js,Forms,Express,Next.js,我正在尝试在Nextjs/express应用程序中将表单数据发送到服务器。当我按“提交”时,我看不到任何输出被发送到服务器 我尝试了下面的代码,但没有成功,我不明白为什么它不起作用,因为我是这个堆栈的新手 index.js class Index extends Component{ render(){ return( <form action="/server" method="post"> <input type="text" id="name"
class Index extends Component{
render(){
return(
<form action="/server" method="post">
<input type="text" id="name"></input>
<input type="submit"/>
</form>
);
}
}
我希望网页显示我在表单中输入字段的数据。相反,它只显示两个大括号({})。EDIT
我在前端和后端切换了您的示例回购中的一些内容。您可以在代码示例中看到它们强>
要做到这一点,您需要做两件事:
一个onChange处理程序处理输入,一个onSubmit处理程序处理提交到服务器的操作。下面是我对您的示例的实现
class Index extends Component {
constructor() {
super();
this.state = {
firstName: '',
};
}
handleChange = evt => {
// This triggers everytime the input is changed
this.setState({
[evt.target.name]: evt.target.value,
});
};
handleSubmit = evt => {
evt.preventDefault();
//making a post request with the fetch API
fetch('/server', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstName:this.state.firstName
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error))
});
};
render(){
return(
<form onSubmit={this.handleSubmit} >
<input
name="firstName"
type="text"
id="name"
value={this.state.firstName}
onChange={this.handleChange}>
</input>
<input type="submit"/>
</form>
);
}
}
希望这有帮助
class Index extends Component {
constructor() {
super();
this.state = {
firstName: '',
};
}
handleChange = evt => {
// This triggers everytime the input is changed
this.setState({
[evt.target.name]: evt.target.value,
});
};
handleSubmit = evt => {
evt.preventDefault();
//making a post request with the fetch API
fetch('/server', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstName:this.state.firstName
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error))
});
};
render(){
return(
<form onSubmit={this.handleSubmit} >
<input
name="firstName"
type="text"
id="name"
value={this.state.firstName}
onChange={this.handleChange}>
</input>
<input type="submit"/>
</form>
);
}
}
const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
server.use(bodyParser.urlencoded({ extended: true }))
server.use(bodyParser.json())
server.post('/server', (req, res) => {
console.log(req.body)
const firstName = req.body.firstName
res.send({firstName})
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Read on http://localhost:3000')
})
})