Javascript 无法在React表单的第二个字段中键入内容。为什么会发生这种情况？

我对反应有些陌生，我很难识别是什么原因导致我的状态被破坏。“提交”按钮工作正常，名称也很好，但由于某些原因，我无法在我的“价格”文本字段中键入内容。将项目添加到列表时，价格的美元符号正在添加，但我无法在价格字段中键入任何内容

import React, { Component } from 'react';

class ItemForm extends Component {
  state = { name: '', price: ''}

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  handleSubmit = (e) => {
    //stop page from reloading
    e.preventDefault();
    //add item to groceries array
    const { addItem } = this.props
    addItem(this.state.name, this.state.price)
    // this.props.addItem(this.state.price)
    //clear form on submit
    this.setState({name: '', price: ''})
  }


  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <input 
        required 
        placeholder='add Grocery Item' 
        name="name" 
        value={this.state.name}
        onChange={this.handleChange}
        />
        <br />
         <input  
        placeholder='add price (optional)' 
        name="price" 
        value={this.state.price}
        onChange={this.handleChange}
        />
        <br />
        <input class = "btn btn-primary" type = "submit" value = 
  "Add" />
      </form>
    )
  }
}

export default ItemForm;

import React，{Component}来自'React'；
类ItemForm扩展组件{
状态={name:''，价格：'}
handleChange=（e）=>{
常量{name，value}=e.target
this.setState（{[name]：value}）
}
handleSubmit=（e）=>{
//停止页面重新加载
e、 预防默认值（）；
//将项目添加到groceries数组
const{addItem}=this.props
addItem（this.state.name、this.state.price）
//this.props.addItem（this.state.price）
//提交时填写清楚表格
this.setState（{name:''，price:''}）
}
render（）{
返回(




)
}
}
导出默认项目表单；

我想你不小心把

price=“price”

而不是

name=“price”