[英]How to make react select an params on axios?
I am newbie on ReactJs, I have a table Product on MySQL and I developed a dynamic table on ReactJS on the frontEnd using MySQL and NodeJs on Backend, my dynamic table has four columns : Product, Quantity, Price and total, I want when I select a product on the Product column, this Price will be displayed on its column.我是 ReactJs 的新手,我在 MySQL 上有一个表 Product,我在前端的 ReactJS 上使用 MySQL 和后端的 NodeJs 开发了一个动态表,我的动态表有四列:Product、Quantity、Price 和 total,我想要的时候在产品列上选择一个产品,此价格将显示在其列上。
My router is :我的路由器是:
exports.getPrixprod = function(req,res) {
connection.query('SELECT PrixV FROM produits where Nomp = ?', [req.params.Nomp], function(error, results, fields) {
if (error) throw error;
res.send(JSON.stringify(results));
console.log(results);
});
}
My class is :我的班级是:
class AjouterFacture extends Component {
constructor(props) {
super(props);
this.state = {
Produits: [],
Quantite: "",
Prix: "",
lineItemData: [],
selectprdt: props.match.params.selectprdt,
id: 0
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRowDelete = this.handleRowDelete.bind(this);
this.handleRowAdd = this.handleRowAdd.bind(this);
this.getTotal = this.getTotal.bind(this);
this.DatefactChanged = this.DatefactChanged.bind(this);
this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
this.handleselectprdtChange = this.handleselectprdtChange.bind(this);
}
componentWillReceiveProps(nextProps) {
console.log("nextProps", nextProps);
}
componentDidMount() {
axios({
method: "get",
url: "/app/getNomprod/",
withCredentials: true,
}).then(response => {
if (response && response.data) {
this.setState({
Produits: response.data
});
}
}).catch(error => console.log(error));
}
popupAjout(event) {
const getAlert = () => (<SweetAlert
success
title="Ajout facture"
onConfirm={ this.handleSubmit}
>
UNe facture est ajoutée avec succés
</SweetAlert>);
this.setState({
alert: getAlert()
});
}
handleSubmit() {
var lp = {
Nomp: this.state.selectprdt,
QuantiteF: this.state.QuantiteF,
}
axios({
method: 'post',
url: '/app/ajouterlp/',
data: lp,
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], {
Quantite: 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
});
axios({
method: "get",
url: "/app/getPrixprod/" + this.props.match.params.selectprdt,
withCredentials: true,
}).then(response => {
if (response && response.data) {
this.setState({
Prix: response.data
});
}; console.log(response.data);
}).catch(error => console.log(error));
this.setState({
rowData: rowDataCopy
});
}
render() {
let {
Clients
} = this.state.Clients;
var Cd = {
pointerEvents: 'none'
}
let {
Produits
} = this.state.Produits;
let {
rowData
} = this.state.rowData;
const Prix = this.state;
return (<div className="animated fadeIn">
<h6> <Label ><strong>Veuillez ajouter au moins un produit : </strong></Label></h6>
<Table responsive style={items} >
<thead style={back}>
<tr>
<th>PRODUIT</th>
<th>QUANTITE</th>
<th>PRIX UNITAIRE</th>
<th>TOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.rowData.map((data, index) => (
<tr key={index} id={index}>
<td>
{" "} <Input type="select" name="selectedcl" id="selectcl"
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} value="select">{pdt.Nomp}</option>
)}
</Input>
</td>
<td><Input type="number"
value={data.Quantite || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>
<td>
<p>{ this.state.Prix} DT</p>
</td>
<td >
<p key={index} className='pa2 mr2 f6'>{(data.Quantite || 0) * (Prix )} DT</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>
<tfoot>
<tr>
<th></th>
<th >Grand total :</th>
<th>{this.getTotal()} DT</th>
<th></th>
</tr>
</tfoot>
</Table>
</div>);
}
getTotal() {
let grandTotal = 0;
const rowTotals = this.state.rowData.map(row => (row.Quantite * row.PrixV) || 0);
if (rowTotals.length > 0) {
grandTotal = rowTotals.reduce((acc, val) => acc + val);
}
return grandTotal;
}
handleRowDelete(row) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.splice(row, 1);
this.setState({
rowData: rowDataCopy
});
}
handleRowAdd() {
let id = this.state.id;
id = id++;
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.push({
selectprdt: "",
Quantite: 0,
Prix: 0
});
this.setState({
rowData: rowDataCopy,
id: id
});
}
}
export default AjouterFacture;
When I run my backend with Postman, it works well, but when I run my Frontend, I get the Price []
on the console and I get the value of select undefined
on the Network console :当我使用 Postman 运行我的后端时,它运行良好,但是当我运行我的前端时,我在控制台上获得了价格
[]
并且在网络控制台上获得了 select undefined
的值:
How can I fix that please ?请问我该如何解决?
change:改变:
let { Produits } = this.state.Produits;
for为了
let { Produits } = this.state;
For referencing this.props.match.params
you need to use react-router
.要引用
this.props.match.params
您需要使用react-router
。 In case you are already using this library, then you need to wrap the component with withRouter
HOC:如果您已经在使用这个库,那么您需要使用
withRouter
HOC 包装组件:
import { withRouter } from 'react-router';
class AjouterFacture extends Component {
...
}
export default withRouter(AjouterFacture);
Then you can get this.props.match.params.selectprdt
.然后你可以得到
this.props.match.params.selectprdt
。 But do not forget to include this attribute in your react-router path somewhere in router component in a way like this:但是不要忘记以如下方式将此属性包含在路由器组件中某处的 react-router 路径中:
<Route path='/facture/:selectprdt' component={AjouterFacture}>
And try not to use(it should not work by the way):并尽量不要使用(顺便说一下,它不应该工作):
let {
Clients
} = this.state.Clients;
let {
Produits
} = this.state.Produits;
let {
rowData
} = this.state.rowData;
and use these instead:并改用这些:
const {
Clients, Produits, rowData
} = this.state;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.