Javascript 为什么可以'；我的反应组件找不到元素吗？

我有一个导致错误的组件，“TypeError:无法读取null的属性'value'。它嵌套在另一个组件中，使该组件不加载

代码如下：

const NewItem = (props) => {

const qty = "QuantityBox" + props.identifier.toString();
const prc = "PriceBox" + props.identifier.toString();
return(
    <div className="NewItem">
        <div className="ItemNameInput">
            <p className="InputLabel">Item Name</p>
            <input className="inputFull" type="text" />
        </div>
        <div className="QuantityAndPrice">
            <div className="QuantityInput">
                <p className="InputLabel">Qty</p>
                <input className="inputEighth" value="1" id={qty} type="text" />
            </div>
            <div className="PriceInput">
                <p className="InputLabel">Price</p>
                <input className="inputFourth" value="0" id={prc} type="text" />
            </div>
            <div className="TotalOutput">
                <p className="InputLabel">Total</p>
                <h4 className="TotalAmount">{(document.getElementById(qty).value * document.getElementById(prc).value).toFixed(2)}</h4>
            </div>
            <img src={TrashCan} alt="Delete" />
        </div>
    </div>
)

constnewitem=（道具）=>{
const qty=“QuantityBox”+props.identifier.toString（）；
const prc=“PriceBox”+props.identifier.toString（）；
返回(
项目名称
数量

价格

总计

{（document.getElementById（qty.value*document.getElementById（prc.value）.toFixed（2）}
)

}

在“TotalAmount”h4中，问题就出现了。如果我拆下那部分，它就可以正常工作了。从错误判断，它找不到我指定的元素，但我不明白为什么。我不知道它是否与父组件有关，但我将把它放在这里以防万一：

class NewInvoice extends Component {
constructor(props) {
    super(props)

    this.state = {
        numberOfItems: [0]
    };
}

createItem = () => {
    this.setState(prevState => ({numberOfItems: [...prevState.numberOfItems, (this.state.numberOfItems.length - 1)]}));
}

render() {
    return(
        <div className="NewInvoice">
            <button onClick={() => this.props.goBackInvoiceList()} className="goBack">Go back</button>
            <h1>New Invoice</h1>
            <form>
                <p className="FormAreaLabel">Bill From</p>
                <div className="BillFrom">
                    <div className="StreetAddressInput">
                        <p className="InputLabel">Street Address</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="HalfInput">
                        <div className="CityInput">
                            <p className="InputLabel">City</p>
                            <input className="inputHalf" type="text" />
                        </div>
                        <div className="PostCodeInput">
                            <p className="InputLabel">Post Code</p>
                            <input className="inputHalf" type="text" />
                        </div>
                    </div>
                    <div className="NewCountryInput">
                        <p className="InputLabel">Country</p>
                        <input className="inputFull" type="text" />
                    </div>
                </div>
                <div className="BillTo">
                    <div className="ClientNameInput">
                        <p className="InputLabel">Client's Name</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="ClientEmailInput">
                        <p className="InputLabel">Client's Email</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="ClientStreetAddressInput">
                        <p className="InputLabel">Street Address</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="HalfInput">
                        <div className="ClientCityInput">
                            <p className="InputLabel">City</p>
                            <input className="inputHalf" type="text" />
                        </div>
                        <div className="ClientPostCodeInput">
                            <p className="InputLabel">Post Code</p>
                            <input className="inputHalf" type="text" />
                        </div>
                    </div>
                    <div className="ClientCountryInput">
                        <p className="InputLabel">Country</p>
                        <input className="inputFull" type="text" />
                    </div>
                </div>
                <div className="OtherInfo">
                    <div className="InvoiceDateInput">
                        <p className="InputLabel">Invoice Date</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="PaymentTermsInput">
                        <p className="InputLabel">Payment Terms</p>
                        <input className="inputFull" type="text" />
                    </div>
                    <div className="ProjectDescriptionInput">
                        <p className="InputLabel">Project Description</p>
                        <input className="inputFull" type="text" />
                    </div>
                </div>
                <h3 className="ItemListTitle">Item List</h3>
                <div className="ItemList">
                    {this.state.numberOfItems.map((index) => 
                        <NewItem key={index} identifier={index} />
                    )}
                    <button onClick={() => this.createItem()} className="AddNewItem">+ Add New Item</button>
                </div>
            </form>
            <div className="NewInvoiceEndButtons">
                <button className="Discard">Discard</button>
                <button className="SaveAsDraft">Save As Draft</button>
                <button className="SaveAndSend">Save And Send</button>
            </div>
        </div>
    )
}

类NewInvoice扩展组件{
建造师（道具）{
超级（道具）
此.state={
numberOfItems:[0]
};
}
createItem=（）=>{
this.setState（prevState=>（{numberOfItems:[…prevState.numberOfItems，（this.state.numberOfItems.length-1）]）；
}
render（）{
返回(
this.props.goBackInvoiceList（）}className=“goBack”>返回
新发票
来自
街道地址

城市

邮政编码

国家/地区
客户名称
客户的电子邮件
街道地址

城市

邮政编码

国家/地区
发票日期

付款条件

项目说明

项目表
{this.state.numberOfItems.map（（索引）=>
)}
this.createItem（）}className=“AddNewItem”>+添加新项目
丢弃
另存为草稿
保存并发送
)
}

---

}

发生这种情况是因为在指定的h4行中，您试图检索id为“QuantityBox”+props.identifier.toString（）的DOM节点。代码无法检索具有匹配id的DOM元素，导致document.getElementById（qty）返回null。null没有任何属性，因此document.getElementById（qty）.value引发错误，指定它无法访问null的属性值。 此外，如果要直接操作DOM元素，React方法是使用React REF。你应该能够用它达到你想要的结果

阅读更多参考文献：