Forms 来自多个输入框的React setState

我正在做一个配方盒项目，我有一个程序，允许用户单击一个按钮，然后显示输入框，允许用户将新配方添加到列表中

我在表单中有两个输入。一个用于添加的配方名称，一个用于配料。配方名称的输入起作用，并允许用户添加名称，但第二个输入框并没有像应该的那样更新处于状态的配料

为什么IngRadientVal没有在状态中更新？为什么我不能在第二个输入框中输入文本

import React, { Component } from 'react';
import RecipeList from './RecipeList';
import './App.css';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["Pumpkin Pie", "Spaghetti", "Onion Pie"],
      ingredients:[
        ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"],
        ["Noodles", "Tomato Sauce", "(Optional) Meatballs"],
        ["Onion", "Pie Crust"]
      ],
      inputVal: '',
      ingredientVal: '',
      showRecipe: false
    };
  }

  // Get text user inputs for recipe
  handleChange = (event) => {
    this.setState({inputVal: event.target.value});
  };

  handleIngredientChange = (event) => {
    this.setState({ingredientVal: event.target.value});
  }

  // When user submits recipe this adds it
  onSubmit = (event) => {
    event.preventDefault()
    this.setState({
      inputVal: '',
      items: [...this.state.items, this.state.inputVal],
      ingredientVal: '',
      ingredients: [...this.state.ingredients, this.state.ingredientVal]
    });
  }

  onIngredientSubmit = (event) => {
    event.preventDefault()
    this.setState({
      ingredientVal: '',
      ingredients: [...this.state.ingredients, this.state.ingredientVal]
    });
  }

  // Shows recipe
  AddRecipe = (bool) => {
    this.setState({
      showRecipe: bool
    });
  }

  render() {
    return (
      <div className="App">
        <h3>Recipe List</h3>
        <RecipeList items={this.state.items} ingredients={this.state.ingredients} />
        <button onClick={this.AddRecipe}>Add New Recipe</button>


      { this.state.showRecipe ?
        <div>
          <form className="Recipe-List" onSubmit={this.onSubmit}>
            <div className="Recipe-Item">
              <label>Recipe Name</label>
              <input
                value={this.state.inputVal}
                onChange={this.handleChange} />
            </div>

            <div className="Recipe-Item">
              <label>Ingredients</label>
              <input
                value={this.state.ingredientVal}
                onChange={this.state.handleIngredientChange} />
            </div>
            <button>Submit</button>
          </form>
        </div>

        :null
      }
      </div>
    );
  }

}

import React，{Component}来自'React'；
从“/RecipeList”导入RecipeList；
导入“/App.css”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
商品：[“南瓜派”、“意大利面”、“洋葱派”]，
成分：[
[“南瓜泥”、“甜炼乳”、“鸡蛋”、“南瓜派香料”、“派皮”]，
[“面条”、“番茄酱”、“可选）肉丸”]，
[“洋葱”、“馅饼皮”]
],
输入值：“”，
IngRadientVal:“”，
showRecipe:错误
};
}
//获取配方的文本用户输入
handleChange=（事件）=>{
this.setState（{inputVal:event.target.value}）；
};
handleIngredientChange=（事件）=>{
this.setState（{ingredientVal:event.target.value}）；
}
//当用户提交配方时，会添加它
onSubmit=（事件）=>{
event.preventDefault（）
这是我的国家({
输入值：“”，
items:[…this.state.items，this.state.inputVal]，
IngRadientVal:“”，
配料：[…this.state.components，this.state.ingredientVal]
});
}
onIngredientSubmit=（事件）=>{
event.preventDefault（）
这是我的国家({
IngRadientVal:“”，
配料：[…this.state.components，this.state.ingredientVal]
});
}
//显示配方
AddRecipe=（bool）=>{
这是我的国家({
showRecipe:bool
});
}
render（）{
返回(
菜谱
添加新配方
{this.state.showRecipe？
配方名
成分
提交
：null
}
);
}
}
您正在调用
this.state.handleIngredientChange
作为您的
onChange
当它应该是
this.handleIngredientChange
您正在调用
this.state.handleIngredientChange
作为您的
onChange
当它应该是
this.handleIngredientChange
谢谢。忽略了这一点。我知道这很愚蠢，谢谢。忽略了这一点。我知道这是件愚蠢的事。