javascript - 通过引用从父级中的无状态子级组件访问输入值

我正在创建一个程序来跟踪商店库存。我有一个项目名称（字符串）的数组，可以映射以生成一个组件，该组件呈现每个项目的标题以及相应的输入字段：

function Inventory(props){
    let items = ['milk', 'bread', 'butter'],
        itemInput = items.map((value,index) => {
      return(
        <div key={index}>
          <h3>{value}</h3>
          <input type={'text'} />
        </div>
      )
    })

    return(
      <div>
        {itemInput}
      </div>
    )
};

Screenshot of output

如何访问输入值及其对应的标题？例如，如果我在5的输入中键入milk，则希望能够同时访问5和milk。

我试过使用refs（结束时仅引用最后一个数组项），event和this无济于事。任何建议将不胜感激。

最佳答案

可以为此使用onChange处理程序：

<input type="text" onChange={e => this.setState({ [value]: e.target.value })} />

状态现在看起来像这样：

{
  milk: 5,
  bread: 2,
  butter: 10
}