我在reactjs、nodejs和mysql上开发了一个动态表,其中包含产品名称和产品数量,如您所见:
当我提交它,它将被保存,但名称产品的价值 NULL
还有数量 ''
,您可以看到我的代码如下:
handleSubmit() {
const { selectprdt } = this.state;
console.log("selectprdt", this.state.selectprdt);
var facture = {
Nomp: this.state.selectprdt,
QuantiteF: this.state.QuantiteF
};
axios({
method: 'post',
url: '/app/ajouterfact/',
data: facture,
withCredentials: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(function(response) {
this.setState({ alert: null });
this.props.history.push('/factures/listefactures')
}.bind(this));
}
handleQuantiteChange(index, value) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
QuantiteF: parseInt(value, 10)
});
this.setState({
rowData: rowDataCopy
});
}
handleselectprdtChange(index, value) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
selectprdt: value
});
return axios
.get('/app/getPrixprod/' + value)
.then(response => {
if (response && response.data) {
this.setState(({
Prix
}) => ({
rowData: rowDataCopy,
Prix: [...Prix, ...response.data]
}));
}
})
.catch(error => {
console.error(error);
});
}
return (
<div className="animated fadeIn">
<Table>
<tbody>
{this.state.rowData.map((data, index) => (
<tr key={index} id={index}>
<td>{" "}
<Input
type="select"
name="selectprdt"
id="selectprdt"
placeholder="Veuillez sélectionner un produit"
value={data.selectprdt}
onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
<option key={-1} hidden>Choisisr un produit</option>
{
this.state.Produits.map((pdt, i) => {
<option key={i}>{pdt.Nomp}</option>
});
}
</Input>
</td>
<td>
<Input
type="text"
value={data.QuantiteF || 0}
onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/>
</td>
{ console.log('value:',data.QuantiteF, "data type of value", typeof(data.QuantiteF)) }
<td>
<p key={index}>
{this.state.Prix[index] && this.state.Prix[index].PrixV}
</p>
</td>
<td>
<p key={index} className='pa2 mr2 f6'>
{ (data.QuantiteF || 0) * (parseInt(this.PrixDisplay(data.selectprdt)|| 0)) }
</p>
</td>
<td>
<Button
onClick={(e) => this.handleRowDelete(index)}
active
style={center}
size="sm"
color="danger"
className="btn-pill"
aria-pressed="true">Effacer
</Button>
</td>
{" "}
</tr>
))}
<tr>
<td/>
<td/>
<td/>
<td/>
<td>
<Button
onClick={this.handleRowAdd}
active
style={center}
size="sm"
color="info"
className="btn-pill"
aria-pressed="true">Ajouter une ligne
</Button>
</td>
</tr>
</tbody>
</Table>
</div>)
};
我的路由器是:
exports.ajouterfact = function(req, res) {
console.log("req", req.body);
var today = new Date();
var factures = {
"Nfact": req.body.Nfact,
"Nom": req.body.Nom,
"Datefact": req.body.Datefact,
"Note": req.body.Note,
"Nomp": req.body.Nomp,
"QuantiteF": req.body.QuantiteF,
}
connection.query('INSERT INTO factures SET ?', factures, function(error, results, fields) {
if (error) {
console.log("error ocurred", error);
res.send({
"code": 400,
"failed": "error ocurred"
})
}
else {
res.send({
"code": 200,
"success": "facture registered sucessfully"
});
}
})
};
如何获得产品名称和数量的值?
暂无答案!
目前还没有任何答案,快来回答吧!