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

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

我已尝试使用refs（最后只引用最后一个数组项），event和this无效。任何建议将不胜感激。

Answer 1

您使用的functional组件没有state或refs。您有两个选项，可以将值设置为从父级传递的props，也可以将其设置为stateful组件。

Stateless组件必须是专门用于呈现的哑组件，所有逻辑必须位于stateful parent component。

根据 docs

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

Answer 2

可以使用onChange处理程序：

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

现在，州将看起来像这样：

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

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

2 个答案: