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

功能清单（道具）{
让项目=[‘牛奶’、‘面包’、‘黄油’]，
itemInput=items.map（（值、索引）=>{
返回(
{value}
)
})
返回(
{itemInput}
)
};

如何访问输入值及其对应的标题？例如，如果我在

milk

的输入中键入

5

，我希望能够访问

5

和

milk

---

我尝试过使用

refs

（最后只引用最后一个数组项）、

事件和
此
，但没有效果。如果您有任何建议，我们将不胜感激。
可以使用onChange处理程序：

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

您正在使用的
功能组件
没有
状态
或
参考
。您有两个选项，要么将该值设置为从父级传递下来的道具，要么将其设置为有状态的组件

无状态
组件必须是专门用于呈现的哑组件，并且所有逻辑必须位于有状态父组件中

根据

您不能在功能组件上使用ref属性，因为 它们没有实例。您应该将组件转换为类 如果您需要对其进行引用，就像您需要生命周期时所做的那样 方法或状态

在第一种情况下

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

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

功能清单（道具）{
让项目=[‘牛奶’、‘面包’、‘黄油’]，
itemInput=items.map（（val，index）=>{
返回(
{val}
props.handleChange（e，val）}/>
)
})
返回(
{itemInput}
)
};

然后父对象将具有如下逻辑

 <Inventory handleChange={this.handleChange} childInput={this.state.childInputVal}/>


 handleChange = (e, key) => {
      var childInputVal = {...this.state.childInputVal}
      childInputVal[key] = e.target.value
      this.setState({childInputVal})
 }

 state = {
      childInputVal: {}

 }

handleChange=（e，键）=>{
var childInputVal={…this.state.childInputVal}
childInputVal[key]=e.target.value
this.setState（{childInputVal}）
}
状态={
childInputVal:{}
}

另一个选项是使该组件本身成为有状态组件

class Inventory extends React.Component {
    state= {
        inputValues: {}  
     }
   handleChange = (e, val) => {
        handleChange = (e, key) => {
         var childInputVal = {...this.state.inputValues}
         inputValues[key] = e.target.value
         this.setState({inputValues})

   }
   render() {
      let items = ['milk', 'bread', 'butter'],
      itemInput = items.map((val,index) => {
      return(
        <div key={index}>
          <h3>{val}</h3>
          <input type={'text'} value={this.state.inputValues[val] || '' } onChange={(e) => this.handleChange(e, val)}/>
        </div>
      )

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

类清单扩展了React.Component{
状态={
输入值：{}
}
handleChange=（e，val）=>{
handleChange=（e，键）=>{
var childInputVal={…this.state.inputValues}
inputValues[key]=e.target.value
this.setState（{inputValues}）
}
render（）{
让项目=[‘牛奶’、‘面包’、‘黄油’]，
itemInput=items.map（（val，index）=>{
返回(
{val}
this.handleChange（e，val）}/>
)
}
返回(
{itemInput}
)
}

@lightspeed，此解决方案适用于功能组件？？？？？将其转换为有状态组件后，它可以工作，谢谢。

class Inventory extends React.Component {
    state= {
        inputValues: {}  
     }
   handleChange = (e, val) => {
        handleChange = (e, key) => {
         var childInputVal = {...this.state.inputValues}
         inputValues[key] = e.target.value
         this.setState({inputValues})

   }
   render() {
      let items = ['milk', 'bread', 'butter'],
      itemInput = items.map((val,index) => {
      return(
        <div key={index}>
          <h3>{val}</h3>
          <input type={'text'} value={this.state.inputValues[val] || '' } onChange={(e) => this.handleChange(e, val)}/>
        </div>
      )

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