Javascript 使用ReactJS的动态表中列的总计
我的问题是，当我输入数量和价格的值来计算总数时，它将被计算，但当我添加另一行时，总值是根据上次输入的数量和价格值计算的，如下图所示： 我的代码如下：Javascript 使用ReactJS的动态表中列的总计,javascript,reactjs,html-table,row,Javascript,Reactjs,Html Table,Row,我的问题是，当我输入数量和价格的值来计算总数时，它将被计算，但当我添加另一行时，总值是根据上次输入的数量和价格值计算的，如下图所示： 我的代码如下： class AjouterFacture extends Component { constructor(props) { super(props); this.state = { rowData: [],
class AjouterFacture extends Component {
constructor(props) {
super(props);
this.state = {
rowData: [],
Produits: [],
Quantite: "",
Prix: ""
};
this.handleRowChange = this.handleRowChange.bind(this);
this.handleRowDelete = this.handleRowDelete.bind(this);
this.handleRowAdd = this.handleRowAdd.bind(this);
this.getTotal = this.getTotal.bind(this);
this.pushToCaller = this.pushToCaller.bind(this);
}
handleQuantiteChange(e) {
this.setState({
Quantite: e.target.value
}, this.pushToCaller);
}
handleselectprdtChange(e) {
this.setState({
selectprdt: e.target.value
}, this.pushToCaller);
}
handlePrixChange(e) {
this.setState({
Prix: e.target.value
}, this.pushToCaller);
}
pushToCaller() {
this.handleRowChange( {
Quantite: parseInt(this.state.Quantite, 10),
selectprdt: this.state.selectprdt,
Prix: parseFloat(this.state.Prix),
});
}
render() {
return (<div className="animated fadeIn">
<h6> Veuillez ajouter au moins un produit : </h6>
<Table >
<thead >
<tr>
<th>PRODUIT</th>
<th>QUANTITE</th>
<th>PRIX UNITAIRE</th>
<th>TOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.rowData.map((index) =>
<tr key={index} id={index}
onChange={this.handleRowChange}>
<td> <Input type="select" name="selectedcl" id="selectcl"
placeholder="Veuillez sélectionner un produit" value={this.state.rowData.selectprdt}
onChange={this.handleselectprdtChange} >
<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="number"
placeholder="0" value={this.state.rowData.Quantite} onChange={this.handleQuantiteChange}/></td>
<td>
<InputGroup ><Input type="text"
value={this.state.rowData.Prix} onChange={this.handlePrixChange} />
<InputGroupAddon addonType="prepend">
<InputGroupText><i ></i></InputGroupText>
</InputGroupAddon>
</InputGroup >
</td>
<td >
<p >{this.state.Quantite * this.state.Prix} </p>
</td>
<td>
<Button onClick={this.handleRowDelete} active style={center} >Effacer</Button>
</td> </tr> )}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><Button onClick={this.handleRowAdd} >Ajouter une ligne</Button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th >Grand total :</th>
<th>{this.getTotal()} </th>
<th></th>
</tr>
</tfoot>
</Table>
</div>);
}
getTotal() {
let grandTotal = 0;
const rowTotals = this.state.rowData.map(row => this.state.Quantite * this.state.Prix);
if (rowTotals.length > 0) {
grandTotal = rowTotals.reduce((acc, val) => acc + val);
}
return grandTotal;
}
handleRowChange(row, data) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[row] = data;
this.setState({
rowData: rowDataCopy
});
}
handleRowDelete(row) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.splice(row, 1);
this.setState({
rowData: rowDataCopy
});
}
handleRowAdd() {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy.push({selectprdt:'', Quantite : "", Prix :"" });
this.setState({
rowData: rowDataCopy
});
}
}
export default AjouterFacture;
类AjouterFacture扩展组件{
建造师（道具）{
超级（道具）；
此.state={
行数据：[]，
产品：[]，
量子化：“，
大奖赛：“
};
this.handleRowChange=this.handleRowChange.bind（this）；
this.handleRowDelete=this.handleRowDelete.bind（this）；
this.handleRowAdd=this.handleRowAdd.bind（this）；
this.getTotal=this.getTotal.bind（this）；
this.pushToCaller=this.pushToCaller.bind（this）；
}
HandleQuantityChange（e）{
这是我的国家({
数量：即目标值
}，这是普什托卡勒）；
}
无手柄选择PRDTChange（e）{
这是我的国家({
选择prdt:e.target.value
}，这是普什托卡勒）；
}
手交换（e）{
这是我的国家({
Prix:e.target.value
}，这是普什托卡勒）；
}
pushToCaller（）{
这是零钱（{
Quantite:parseInt（this.state.Quantite，10），
selectprdt:this.state.selectprdt，
Prix:parseFloat（this.state.Prix），
});
}
render（）{
返回(
维列兹·阿尤特·奥莫因联合国产品：
产品
定量
统一大奖赛
全部的
{this.state.rowData.map（（索引）=>
选唱诗班
{this.state.Produits.map（（pdt，i）=>
{pdt.Nomp}
)}
{this.state.Quantite*this.state.Prix}
埃法克
)}
外部对齐
总计：
{this.getTotal（）}
);
}
getTotal（）{
设grandTotal=0；
const rowTotals=this.state.rowData.map（row=>this.state.Quantite*this.state.Prix）；
如果（rowTotals.length>0）{
grandTotal=行总数。减少（（acc，val）=>acc+val）；
}
返回总计；
}
HandlerRowChange（行、数据）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy[row]=数据；
这是我的国家({
rowData:rowDataCopy
});
}
HandlerRowDelete（行）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy.splice（第1行）；
这是我的国家({
rowData:rowDataCopy
});
}
handleRowAdd（）{
const rowDataCopy=this.state.rowData.slice（0）；
rowDataCopy.push（{selectprdt:''，Quantite:''，Prix:''）；
这是我的国家({
rowData:rowDataCopy
});
}
}
导出默认的外部特性；
请问我怎样才能更正 尝试下面更新的代码
class AjouterFacture extends Component {
constructor(props) {
super(props);
this.state = {
rowData: [],
Produits: [],
Quantite: "",
Prix: "",
id:0
};
this.handleRowChange = this.handleRowChange.bind(this);
this.handleRowDelete = this.handleRowDelete.bind(this);
this.handleRowAdd = this.handleRowAdd.bind(this);
this.getTotal = this.getTotal.bind(this);
this.pushToCaller = this.pushToCaller.bind(this);
}
handleQuantiteChange(e) {
this.setState({
Quantite: e.target.value
}, this.pushToCaller);
}
handleselectprdtChange(e) {
this.setState({
selectprdt: e.target.value
}, this.pushToCaller);
}
handlePrixChange(e) {
this.setState({
Prix: e.target.value
}, this.pushToCaller);
}
pushToCaller() {
this.handleRowChange(this.state.id, {
Quantite: parseInt(this.state.Quantite, 10),
selectprdt: this.state.selectprdt,
Prix: parseFloat(this.state.Prix),
});
}
render() {
return (<div className="animated fadeIn">
<h6> Veuillez ajouter au moins un produit : </h6>
<Table >
<thead >
<tr>
<th>PRODUIT</th>
<th>QUANTITE</th>
<th>PRIX UNITAIRE</th>
<th>TOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
{this.state.rowData.map((index) =>
<tr key={index} id={index}
onChange={this.handleRowChange}>
<td> <Input type="select" name="selectedcl" id="selectcl"
placeholder="Veuillez sélectionner un produit" value={this.state.rowData.selectprdt}
onChange={this.handleselectprdtChange} >
<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="number"
placeholder="0" value={this.state.rowData.Quantite} onChange={this.handleQuantiteChange}/></td>
<td>
<InputGroup ><Input type="text"
value={this.state.rowData.Prix} onChange={this.handlePrixChange} />
<InputGroupAddon addonType="prepend">
<InputGroupText><i ></i></InputGroupText>
</InputGroupAddon>
</InputGroup >
</td>
<td >
<p >{this.state.Quantite * this.state.Prix} </p>
</td>
<td>
<Button onClick={this.handleRowDelete} active style={center} >Effacer</Button>
</td> </tr> )}
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><Button onClick={this.handleRowAdd} >Ajouter une ligne</Button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th >Grand total :</th>
<th>{this.getTotal()} </th>
<th></th>
</tr>
</tfoot>
</Table>
</div>);
}
getTotal() {
let grandTotal = 0;
const rowTotals = this.state.rowData.map(row => this.state.Quantite * this.state.Prix);
if (rowTotals.length > 0) {
grandTotal = rowTotals.reduce((acc, val) => acc + val);
}
return grandTotal;
}
handleRowChange(row, data) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[row] = data;
this.setState({
rowData: rowDataCopy
});
}
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 : "", Prix :"" });
this.setState({
rowData: rowDataCopy,
id: id
});
}
}
export default AjouterFacture;
类AjouterFacture扩展组件{
建造师（道具）{
超级（道具）；
此.state={
行数据：[]，
产品：[]，
量子化：“，
大奖赛：“，
身份证号码：0
};
this.handleRowChange=this.handleRowChange.bind（this）；
this.handleRowDelete=this.handleRowDelete.bind（this）；
this.handleRowAdd=this.handleRowAdd.bind（this）；
this.getTotal=this.getTotal.bind（this）；
this.pushToCaller=this.pushToCaller.bind（this）；
}
HandleQuantityChange（e）{
这是我的国家({
数量：即目标值
}，这是普什托卡勒）；
}
无手柄选择PRDTChange（e）{
这是我的国家({
选择prdt:e.target.value
}，这是普什托卡勒）；
}
手交换（e）{
这是我的国家({
Prix:e.target.value
}，这是普什托卡勒）；
}
pushToCaller（）{
this.handleRowChange（this.state.id{
Quantite:parseInt（this.state.Quantite，10），
selectprdt:this.state.selectprdt，
Prix:parseFloat（this.state.Prix），
});
}
render（）{
返回(
维列兹·阿尤特·奥莫因联合国产品：
产品
定量
统一大奖赛
全部的
class AjouterFacture extends React.Component {
constructor(props) {
super(props);
this.state = {
rowData: [],
Produits: [],
id: 0
};
this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
this.handlePrixChange = this.handlePrixChange.bind(this);
this.handleselectprdtChange = this.handleselectprdtChange.bind(this);
this.handleRowDelete = this.handleRowDelete.bind(this);
this.handleRowAdd = this.handleRowAdd.bind(this);
this.getTotal = this.getTotal.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});
this.setState({
rowData: rowDataCopy
});
}
handlePrixChange(index, value) {
const rowDataCopy = this.state.rowData.slice(0);
rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {Prix: parseInt(value, 10)});
this.setState({
rowData: rowDataCopy
});
}
render() {
return (
<div className="animated fadeIn">
<h6> Veuillez ajouter au moins un produit : </h6>
<Table>
<thead>
<tr>
<th>PRODUIT</th>
<th>QUANTITE</th>
<th>PRIX UNITAIRE</th>
<th>TOTAL</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.targe.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="number"
placeholder="0"
value={data.Quantite || 0}
onChange={(e) => this.handleQuantiteChange(index, e.target.value)}
/>
</td>
<td>
<InputGroup>
<Input
type="text"
value={data.Prix || 0}
onChange={(e) => this.handlePrixChange(index, e.target.value)}
/>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i />
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</td>
<td>
<p>{(data.Quantite || 0) * (data.Prix || 0)} </p>
</td>
<td>
<Button
onClick={(e) => this.handleRowDelete(index)}
active
style={"center"}
>
Effacer
</Button>
</td>{" "}
</tr>
))}
<tr>
<td />
<td />
<td />
<td />
<td>
<Button onClick={this.handleRowAdd} style={center}>Ajouter une ligne</Button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th />
<th>Grand total :</th>
<th>{this.getTotal()} </th>
<th />
</tr>
</tfoot>
</Table>
</div>
);
}
getTotal() {
let grandTotal = 0;
const rowTotals = this.state.rowData.map(
row => (row.Quantite * row.Prix) || 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;