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

Question

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

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>
    )
};

输出屏幕截图

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

我已经尝试使用refs（这卷起只参考最后的数组元素），event并this无济于事。任何建议将不胜感激。

Answer 1

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

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

状态现在看起来像这样：

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