javascript - 无法在 React 表单上输入我的第二个字段。为什么会发生这种情况？

Question

我的 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;

Answer 1

我认为您不小心输入了 price="price" 而不是 name="price"