[英]React.js not incrementing after function call in onclick
我需要建立一個表格來組織一些數據。 我正在使用“onclick”function 來調用單獨的 function,這應該將 state 變量增加一。 我的 Chrome Devtools 沒有給我任何錯誤,但也沒有更新 stock 變量。 我不確定如何讓 state 更新和顯示。 這是我的源代碼:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
cars: [
{
manufacturer: "Toyota",
model: "Rav4",
year: 2008,
stock: 3,
price: 8500
},
{
manufacturer: "Toyota",
model: "Camry",
year: 2009,
stock: 2,
price: 6500
},
{
manufacturer: "Toyota",
model: "Tacoma",
year: 2016,
stock: 1,
price: 22000
},
{
manufacturer: "BMW",
model: "i3",
year: 2012,
stock: 5,
price: 12000
},
]
};
this.renderCar = this.renderRow.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return {stock: this.stock + 1}
})
}
renderRow(car, index) {
return (
<tr key={index}>
<td key={car.manufacturer}>{car.manufacturer}</td>
<td key={car.model}>{car.model}</td>
<td key={car.year}>{car.year}</td>
<td key={car.stock}>{car.stock}</td>
<td key={car.price}>${car.price}.00</td>
<td key={index}><input type="button" onClick={car.handleClick} value="Increment" /></td>
</tr>
)
}
render() {
return (
<div>
<table>
<thead>
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th>Year</th>
<th>Stock</th>
<th>Price</th>
<th>Option</th>
</tr>
</thead>
<tbody>
{this.state.cars.map(this.renderRow)}
</tbody>
</table>
</div>
);
};
}
ReactDOM.render(<App />, document.getElementById("app"))
我會為該行創建一個單獨的組件,以便您可以輕松地更新該組件以增加 state 中的stock
值:
class App extends React.Component { constructor(props) { super(props); this.state = { cars: [ { manufacturer: "Toyota", model: "Rav4", year: 2008, stock: 3, price: 8500 }, { manufacturer: "Toyota", model: "Camry", year: 2009, stock: 2, price: 6500 }, { manufacturer: "Toyota", model: "Tacoma", year: 2016, stock: 1, price: 22000 }, { manufacturer: "BMW", model: "i3", year: 2012, stock: 5, price: 12000 }, ] }; } render() { return ( <div> <table> <thead> <tr> <th>Manufacturer</th> <th>Model</th> <th>Year</th> <th>Stock</th> <th>Price</th> <th>Option</th> </tr> </thead> <tbody> {this.state.cars.map( (car, i) => <Row car={car} key={i} /> )} </tbody> </table> </div> ); }; } const Row = ({ car }) => { const [stock, setStock] = React.useState(car.stock); return ( <tr> <td>{car.manufacturer}</td> <td>{car.model}</td> <td>{car.year}</td> <td>{stock}</td> <td>${car.price}.00</td> <td><input type="button" onClick={() => setStock(stock + 1)} value="Increment" /></td> </tr> ); } ReactDOM.render(<App />, document.getElementById("app"))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id='app'></div>
如果必須,您可以將它們全部放在一個組件中,但這會有點麻煩。 在渲染時,您必須跟蹤一行的渲染索引並將其傳遞給單擊處理程序,然后在該索引處不可變地更新 state 數組中的stock
屬性。 單獨的組件更容易。
handleClick(e){
const index = Number(e.currentTarget.value);
this.setState(this.state.cars.map(car, i)=> {
return i === index ? {...car, stock: car.stock + 1}: car
})
}
renderRow(){
....
<input type="button" onClick={this.handleClick} value={index} />
...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.