Javascript 如何在React中呈现和替换对特定标记的更改？

我的React应用程序中有一个拍卖部分，但无法正常运行。我想为该页面提供的拍卖金额增加到原来的起始出价。我试着在没有状态的情况下做这件事，并且经历了各种迭代，但还没有开始工作

在下面，您可以从我的拍卖组件中找到我最近的代码迭代：

import React from "react"
import AuctionItems from "../AuctionItems"

class Auction extends React.Component {
    constructor() {
        super()
        this.state = {
            bid: 0
        }
        this.addHundred = this.addHundred.bind(this)
    }

    addHundred() {
        this.setState((state) => {
            console.log ({bid: state.bid + 100})
        })
    }

    render() {

        const items = AuctionItems.map(item => {
            return (
                <div>
                    <h4>{item.name}</h4>
                    <h4>${item.starting_bid}</h4>
                    <button onClick={this.addHundred}>Bid $100</button>
                </div>
            )
        })

        return (
            <div>
                <h1>Auction</h1>
                {items}
            </div>
        )
    }
}

export default Auction

从“React”导入React
从“./拍卖项目”导入拍卖项目
类。组件{
构造函数（）{
超级（）
此.state={
出价：0
}
this.addhund=this.addhund.bind（this）
}
加100（）{
this.setState（（状态）=>{
console.log（{bid:state.bid+100}）
})
}
render（）{
const items=AuctionItems.map（item=>{
返回(
{item.name}
${item.starting_bid}
出价100美元
)
})
返回(
拍卖
{items}
)
}
}
出口违约拍卖

您的状态需要稍微复杂一点，因为您希望跟踪每个项目的出价。下面使用状态的

bids

部分，存储由项目名称键入的每个项目的出价

import React from "react"
import AuctionItems from "../AuctionItems"

class Auction extends React.Component {
    constructor() {
        super()
        this.state = {
            bids: {}
        }
        this.addHundred = this.addHundred.bind(this)
    }

    addHundred(item) {
        this.setState((state) => ({
            bids: {
                ...state.bids,
                [item.name]: (state.bids[item.name] || 0) + 100
            }
        }));
    }

    render() {

        const items = AuctionItems.map(item => {
            return (
                <div>
                    <h4>{item.name}</h4>
                    <h4>
                        ${item.starting_bid + (this.state.bids[item.name] || 0)}
                    </h4>
                    <button onClick={() => this.addHundred(item)}>
                      Bid $100
                    </button>
                </div>
            )
        })

        return (
            <div>
                <h1>Auction</h1>
                {items}
            </div>
        )
    }
}

export default Auction

从“React”导入React
从“./拍卖项目”导入拍卖项目
类。组件{
构造函数（）{
超级（）
此.state={
出价：{}
}
this.addhund=this.addhund.bind（this）
}
追加100（项目）{
this.setState（（状态）=>({
投标：{
…州政府，
[item.name]：（state.bids[item.name]| | 0）+100
}
}));
}
render（）{
const items=AuctionItems.map（item=>{
返回(
{item.name}
${item.starting|u bid+（this.state.bids[item.name]| | 0）}
此.add百（项）}>
出价100美元
)
})
返回(
拍卖
{items}
)
}
}
出口违约拍卖

我想你想独立竞购每件商品？