您正在使用functional没有state或 的组件refs。您有两个选择，要么将值设置为从父级传递的props，要么将其设为stateful组件。

Stateless组件必须是专门用于渲染的哑组件，并且所有逻辑都必须驻留在stateful parent component.

根据文档

您可能不会在功能组件上使用 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>
    )
};

然后父母会有这样的逻辑

 <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: {}

 }

另一种选择是使这个组件本身成为一个有状态的组件

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

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

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

状态现在看起来像这样：

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