英文:
How to update a single cell in a row in react using only Class components. I have no knowledge of hooks or material table
问题
我要更新一行的bidAmount。然而,当我更新时,两行都被更改了。我对hooks或material表格一无所知,所以请使用React类组件进行解释。您的帮助将不胜感激。
以下是我的响应json。
[
{
"bid": {
"id": "b101",
"firstName": "Radek",
"lastName": "Stepanek",
"address": "84 street",
"city": "prague",
"state": "prague",
"pin": "678912",
"phone": "7897896789",
"email": "radek.stepanek@gmail.com",
"productId": "watch101",
"bidAmount": 14000.0
},
"product": {
"id": "watch101",
"productName": "Rolex sp 1",
"shortDescription": "Rolex special edition",
"detailedDescription": "Rolex special edition launched in 1950",
"category": "Watch",
"startingPrice": 10000,
"bidEndDate": "2024-01-23T12:34:56.123+00:00",
"seller": {
"id": "seller1",
"firstName": "Roger",
"lastName": "Federer",
"address": "26 street",
"city": "Basel",
"state": "Basel",
"pin": "780123",
"phone": "9123456789",
"email": "roger.federer@gmail.com"
}
}
},
{
"bid": {
"id": "b102",
"firstName": "Grigor",
"lastName": "Dimitrov",
"address": "104 street",
"city": "sofia",
"state": "sofia",
"pin": "578912",
"phone": "8897896789",
"email": "grigor.dimitrov@gmail.com",
"productId": "watch101",
"bidAmount": 12000.0
},
"product": {
"id": "watch101",
"productName": "Rolex sp 1",
"shortDescription": "Rolex special edition",
"detailedDescription": "Rolex special edition launched in 1950",
"category": "Watch",
"startingPrice": 10000,
"bidEndDate": "2024-01-23T12:34:56.123+00:00",
"seller": {
"id": "seller1",
"firstName": "Roger",
"lastName": "Federer",
"address": "26 street",
"city": "Basel",
"state": "Basel",
"pin": "780123",
"phone": "9123456789",
"email": "roger.federer@gmail.com"
}
}
}
]
我将bidAmount添加到状态中并附加了onChange处理程序,但它会更改所有行的bidAmount。我只想更改特定行的bidAmount。
import axios from "axios";
import React, { Component } from "react";
import ProductDetails from "./ProductDetails";
import BidDetails from "./BidDetails";
class GetBidDetails extends Component {
constructor(props) {
super(props);
this.state = {
productId: '',
bidRows: [],
isInEditMode: false,
bidAmt: 0
};
}
handleProductIdChange = event => {
this.setState({
productId: event.target.value
});
}
handleSubmit = event => {
event.preventDefault();
axios.get(`http://localhost:8082/e-auction/api/v1/seller/show-bids/${this.state.productId}`)
.then(response => {
console.log(response);
this.setState({
bidRows: response.data
});
})
.catch(error => {
console.log(error);
});
}
editBidAmount = id => {
this.setState({
isInEditMode: !this.state.isInEditMode
});
console.log(id);
}
handleBidAmountChange = (e, id) => {
this.setState({
bidAmt: e.target[id].value
});
}
render() {
var bidJA = [];
var finalJA = [];
const { bidRows } = this.state;
let productExist = bidRows.length > 0 ? true : false;
if (productExist) {
bidRows.map(row => bidJA.push(row.bid));
bidJA.map(row => {
});
}
return (
<div>
<br></br><br></br>
<form onSubmit={this.handleSubmit}>
<div>
<label id="productIdLabel">Product ID </label>
<input type="text" value={this.state.productId} onChange={this.handleProductIdChange} />
<button type="submit">Get All Bids</button>
</div>
</form>
<br></br>
{bidRows.length ? <ProductDetails {...bidRows[0].product} /> : null}
<br></br><br></br>
{bidRows.length ?
<table id="tbl">
<tbody>
<tr>
<th>Bid Amount</th>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
</tr>
{bidJA.map((row, rowIndex) => (
<tr key={rowIndex}>
<td><input type="text"
value={this.state.isInEditMode ? this.state.bidAmt : row.bidAmount}
onChange={() => this.handleBidAmountChange(row.id)} /></td>
<td>{row.firstName} {row.lastName}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
<td><button onClick={this.editBidAmount}>Edit</button> <button>Update</button></td>
</tr>
))}
</tbody>
</table> : null
}
</div>
);
}
}
export default GetBidDetails;
希望这能帮助你解决问题。
英文:
I want to update the bidAmount for one row. However, when I update both the rows are getting changed. I have no knowledge of hooks or material table so kindly explain using react Class components. Your help will be highly appreciated.
Here is my response json.
[
{
"bid": {
"id": "b101",
"firstName": "Radek",
"lastName": "Stepanek",
"address": "84 street",
"city": "prague",
"state": "prague",
"pin": "678912",
"phone": "7897896789",
"email": "radek.stepanek@gmail.com",
"productId": "watch101",
"bidAmount": 14000.0
},
"product": {
"id": "watch101",
"productName": "Rolex sp 1",
"shortDescription": "Rolex special edition",
"detailedDescription": "Rolex special edition launched in 1950",
"category": "Watch",
"startingPrice": 10000,
"bidEndDate": "2024-01-23T12:34:56.123+00:00",
"seller": {
"id": "seller1",
"firstName": "Roger",
"lastName": "Federer",
"address": "26 street",
"city": "Basel",
"state": "Basel",
"pin": "780123",
"phone": "9123456789",
"email": "roger.federer@gmail.com"
}
}
},
{
"bid": {
"id": "b102",
"firstName": "Grigor",
"lastName": "Dimitrov",
"address": "104 street",
"city": "sofia",
"state": "sofia",
"pin": "578912",
"phone": "8897896789",
"email": "grigor.dimitrov@gmail.com",
"productId": "watch101",
"bidAmount": 12000.0
},
"product": {
"id": "watch101",
"productName": "Rolex sp 1",
"shortDescription": "Rolex special edition",
"detailedDescription": "Rolex special edition launched in 1950",
"category": "Watch",
"startingPrice": 10000,
"bidEndDate": "2024-01-23T12:34:56.123+00:00",
"seller": {
"id": "seller1",
"firstName": "Roger",
"lastName": "Federer",
"address": "26 street",
"city": "Basel",
"state": "Basel",
"pin": "780123",
"phone": "9123456789",
"email": "roger.federer@gmail.com"
}
}
}
]
I added bidAmount to the state and attached an onChange handler but it is changing bidAmount for all the rows. I want to change bidAmount for only a specific row.
import axios from "axios";
import React, { Component } from "react";
import ProductDetails from "./ProductDetails";
import BidDetails from "./BidDetails";
class GetBidDetails extends Component {
constructor(props) {
super(props)
this.state = {
productId: '',
bidRows: [],
isInEditMode: false,
bidAmt: 0
}
}
handleProductIdChange = event => {
this.setState({
productId: event.target.value
})
}
handleSubmit = event => {
event.preventDefault()
axios.get(`http://localhost:8082/e-auction/api/v1/seller/show-bids/${this.state.productId}`)
.then(response => {
console.log(response);
this.setState({
bidRows: response.data
})
})
.catch(error => {
console.log(error)
})
}
editBidAmount = (id) => {
this.setState({
isInEditMode: !this.state.isInEditMode
})
console.log(id);
}
handleBidAmountChange = (e, id) => {
this.setState({
bidAmt: e.target[id].value
})
}
render() {
var bidJA = [];
var finalJA = [];
const { bidRows } = this.state;
let productExist = bidRows.length > 0 ? true: false;
if(productExist) {
bidRows.map(row => bidJA.push(row.bid))
bidJA.map(row => {
})
}
//console.log('Value of bidJA is '+JSON.stringify(bidJA));
return(
<div>
<br></br><br></br>
<form onSubmit={this.handleSubmit}>
<div>
<label id="productIdLabel">Product ID </label>&nbsp;
<input type="text" value={this.state.productId} onChange={this.handleProductIdChange}/>&nbsp;&nbsp;
<button type="submit">Get All Bids</button>
</div>
</form>
<br></br>
{
bidRows.length ? <ProductDetails {...bidRows[0].product} /> : null
}
<br></br><br></br>
{
bidRows.length ?
<table id="tbl">
<tbody>
<tr>
<th>Bid Amount</th>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
</tr>
{bidJA.map((row, rowIndex) => (
<tr key={rowIndex}>
<td><input type="text"
value={this.state.isInEditMode? this.state.bidAmt: row.bidAmount}
onChange={() => this.handleBidAmountChange(row.id)}/></td>
<td>{row.firstName} {row.lastName}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
<td><button onClick={this.editBidAmount}>Edit</button>&nbsp;<button>Update</button></td>
</tr>
))}
</tbody>
</table> : null
}
</div>
)
}
}
export default GetBidDetails;
答案1
得分: 1
你的代码存在问题,即你在值字段中使用了状态变量 bidAmt。
不要在 bidAmt 中呈现状态值,而应使用行变量本身的值。并且在 onChange 期间,只需更新特定行的金额值,以使其不会更改整个表格。
import axios from "axios";
import React, { Component } from "react";
import ProductDetails from "./ProductDetails";
import BidDetails from "./BidDetails";
class GetBidDetails extends Component {
constructor(props) {
super(props);
this.state = {
productId: "",
bidRows: [],
isInEditMode: false,
bidAmt: 0,
};
}
handleProductIdChange = (event) => {
this.setState({
productId: event.target.value,
});
};
handleSubmit = (event) => {
event.preventDefault();
axios
.get(
`http://localhost:8082/e-auction/api/v1/seller/show-bids/${this.state.productId}`
)
.then((response) => {
console.log(response);
this.setState({
bidRows: response.data,
});
})
.catch((error) => {
console.log(error);
});
};
editBidAmount = (id) => {
this.setState({
isInEditMode: !this.state.isInEditMode,
});
console.log(id);
};
handleBidAmountChange = (e, id) => {
let tmp = [...this.state.bidRows];
tmp[id]["bid"].bidAmount = e.target.value;
this.setState({
bidRows: tmp,
});
};
render() {
const { bidRows } = this.state;
return (
<div>
<br></br>
<br></br>
<form onSubmit={this.handleSubmit}>
<div>
<label id="productIdLabel">Product ID </label>
<input
type="text"
value={this.state.productId}
onChange={this.handleProductIdChange}
/>
<button type="submit">Get All Bids</button>
</div>
</form>
<br></br>
{bidRows.length ? <ProductDetails {...bidRows[0].product} /> : null}
<br></br>
<br></br>
{bidRows.length ? (
<table id="tbl">
<tbody>
<tr>
<th>Bid Amount</th>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
</tr>
{bidRows.map((row, rowIndex) => (
<tr key={rowIndex}>
<td>
<input
type="text"
value={row.bid.bidAmount}
onChange={(e) => this.handleBidAmountChange(e, rowIndex)}
/>
</td>
<td>
{row.bid.firstName} {row.bid.lastName}
</td>
<td>{row.bid.email}</td>
<td>{row.bid.phone}</td>
<td>
<button onClick={this.editBidAmount}>Edit</button>
<button>Update</button>
</td>
</tr>
))}
</tbody>
</table>
) : null}
</div>
);
}
}
export default GetBidDetails;
英文:
The problem with your code is that, you are using the state variable bidAmt in the value field.
Instead of rendering the state value in bidAmt, use the value from row variable itself. And during onChange, just update the amount value for the specific row so that it doesn't change the entire table.
import axios from "axios";
import React, { Component } from "react";
import ProductDetails from "./ProductDetails";
import BidDetails from "./BidDetails";
class GetBidDetails extends Component {
constructor(props) {
super(props);
this.state = {
productId: "",
bidRows: [],
isInEditMode: false,
bidAmt: 0,
};
}
handleProductIdChange = (event) => {
this.setState({
productId: event.target.value,
});
};
handleSubmit = (event) => {
event.preventDefault();
axios
.get(
`http://localhost:8082/e-auction/api/v1/seller/show-bids/${this.state.productId}`
)
.then((response) => {
console.log(response);
this.setState({
bidRows: response.data,
});
})
.catch((error) => {
console.log(error);
});
};
editBidAmount = (id) => {
this.setState({
isInEditMode: !this.state.isInEditMode,
});
console.log(id);
};
handleBidAmountChange = (e, id) => {
let tmp = [...this.state.bidRows];
tmp[id]["bid"].bidAmount = e.target.value;
this.setState({
bidRows: tmp,
});
};
render() {
const { bidRows } = this.state;
return (
<div>
<br></br>
<br></br>
<form onSubmit={this.handleSubmit}>
<div>
<label id="productIdLabel">Product ID </label>&nbsp;
<input
type="text"
value={this.state.productId}
onChange={this.handleProductIdChange}
/>
&nbsp;&nbsp;
<button type="submit">Get All Bids</button>
</div>
</form>
<br></br>
{bidRows.length ? <ProductDetails {...bidRows[0].product} /> : null}
<br></br>
<br></br>
{bidRows.length ? (
<table id="tbl">
<tbody>
<tr>
<th>Bid Amount</th>
<th>Name </th>
<th>Email </th>
<th>Phone </th>
</tr>
{bidRows.map((row, rowIndex) => (
<tr key={rowIndex}>
<td>
<input
type="text"
value={row.bid.bidAmount}
onChange={(e) => this.handleBidAmountChange(e, rowIndex)}
/>
</td>
<td>
{row.bid.firstName} {row.bid.lastName}
</td>
<td>{row.bid.email}</td>
<td>{row.bid.phone}</td>
<td>
<button onClick={this.editBidAmount}>Edit</button>&nbsp;
<button>Update</button>
</td>
</tr>
))}
</tbody>
</table>
) : null}
</div>
);
}
}
export default GetBidDetails;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论