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

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

Screenshot of output

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

我尝试使用 refs (最终仅引用最后一个数组项)、event 和 this 无济于事。任何建议将不胜感激。

Answer 1

您使用的功能组件没有状态或引用。您有两个选择，要么将值设置为从父级传递下来的 props，要么将其设为有状态组件。

无状态组件必须是专门用于渲染的dumb组件，并且所有逻辑必须驻留在有状态父组件中。

根据docs

You may not use the ref attribute on functional components because they don't have instances.You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state

第一种情况

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