Reactjs 修改React中输入的其他组件的状态

我执行了一个项目，可以修改产品的价格（从假API中恢复），然后点击一个按钮，通过计算20%的增值税进行更新。我遇到一个问题，我希望有一个价格状态，在这个状态下，它是我输入的值，即{listProduct.price}，但它不起作用

如果你有解决方案，我很感兴趣，提前谢谢你。（很抱歉，我是新手，我对所有这些概念仍有一些问题）

import React，{Component}来自“React”
导入“../css/ProductsDetails.css”
从“react icons/ai”导入{AiOutlineArrowLeft}；
从“react router dom”导入{Link}
导出默认类产品详细信息扩展组件{
状态={
id:this.props.match.params.id，
价格：
}
更新价格=（e）=>{
控制台日志（e）；
这是我的国家({
价格：即目标价值
})
}
render（）{
const{location:{state:{listProduct}}}=this.props；
返回(
{listProduct.title}
描述
{listProduct.description}
价格
价格（包括增值税）：{数学整数（（listProduct.Price+listProduct.Price*0.2）*100）/100}



类别
{listProduct.category}
)
} 
}

反应组件内部：

1-声明组件的初始状态，在本例中，即用户编写内容之前产品的价格。现在，我们将其设置为0：

状态={
id:this.props.match.params.id，
价格：this.props.listProduct.price？this.props.listProduct.price:0
}

2-然后，在

render

方法中，我们从

this.state

3-最后，我们修改

输入

元素，使其获得价格值

该组件的其余部分工作正常

结果是：

import React, { Component } from 'react'
import '../css/ProductsDetails.css'
import {AiOutlineArrowLeft} from "react-icons/ai";
import {Link} from 'react-router-dom'


export default class ProductsDetails extends Component {
    state = {
        id: this.props.match.params.id,
        price: '0'
    }
    updatePrice = (e) => {
        console.log(e);
        this.setState({
            price: e.target.value
        })
    }

    render() {
        const {price} = this.state
        return (
            <div className="products__details">
                <Link to="/"><AiOutlineArrowLeft className="nav__arrow" /></Link>
                <h1 className="details__title">{listProduct.title}</h1>
                <div className="details__align--desk">
                    <div className="details__img">
                    <img className="product__img" src={listProduct.image} alt="Affichage du produit"/>
                    </div>
                    <div className="products__align--desk">
                        <h2 className="product__title">Description</h2>
                        <p className="product__description">{listProduct.description}</p>
                        <h2 className="product__title">Price</h2>
                        <form className="form__price">
                            <input className="input__price" type="text" value={price} onChange={this.updatePrice} />
                            <p>Price (including VAT): {Math.round((listProduct.price + listProduct.price * 0.2)*100) /100} €</p>
                            <br/>
                            <input className="btn__update" type="submit" value="Update product" />
                        </form>
                    </div>
                    <div className="category__align--desk">
                        <h2 className="product__title">Category</h2>
                        <p className="product__category">{listProduct.category}</p>
                    </div>
                </div>
            </div>
        )
    } 
}

import React，{Component}来自“React”
导入“../css/ProductsDetails.css”
从“react icons/ai”导入{AiOutlineArrowLeft}；
从“react router dom”导入{Link}
导出默认类产品详细信息扩展组件{
状态={
id:this.props.match.params.id，
价格：'0'
}
更新价格=（e）=>{
控制台日志（e）；
这是我的国家({
价格：即目标价值
})
}
render（）{
const{price}=this.state
返回(
{listProduct.title}
描述
{listProduct.description}
价格
价格（包括增值税）：{数学整数（（listProduct.Price+listProduct.Price*0.2）*100）/100}



类别
{listProduct.category}
)
} 
}

以状态为

0的价格（不带引号）开始，然后

const price = this.state.price || (this.props.listProduct ? this.props.listProduct.price : 0)

<input className="input__price" type="text" value={price} onChange{this.updatePrice} />

const price=this.state.price | |（this.props.listProduct？this.props.listProduct.price:0）

因此，如果状态值已更新，则将使用该值，如果未更新，则将检查道具中的价格是否可用，并使用该值，如果没有，则将显示为零。
感谢您的回答，除了我不想在输入中显示0作为起始价格，但我从API获得的价格，然后将其更改为
状态={id:this.props.match.params.id，price:this.props.listProduct.price}
谢谢@Bafsky，我也尝试过这样做，但它给了我一个错误：“TypeError:无法读取未定义”状态的属性'price'={id:this.props.match.params.id，price:this.props.listProduct？this.props.listProduct.price:0}@Bafsky非常感谢，我可以修改价格，但是你不知道我如何显示API的价格而不是0，以便我以后可以修改它？谢谢，但是当我把它放在输入中时：
这让我很好地理解了起始价格，即105.95欧元，但当我放在：
const price=this.state.price |（this.props.listProduct？this.props.listProduct.price:0）
startAre只显示0，而不是我想要的105.95。你确定你的状态中有
0
没有引号吗？你也可以只使用
null
。是的，在price的状态中
0
没有引号，并将其更改为你从哪里获得
listProduct
，所以
const price=this.state.price |（listProduct？listProduct.price:0）
在哪里更改它？