親子のステートレス子コンポーネントからの入力値への参照への参照

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

このためのonChangeハンドラを使用することが可能である：

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

状態は今、このようなものになります。あなたが持っていないfunctionalコンポーネントを使用している

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

Answer 2

をstateまたはrefsである。親から渡された小道具として値を設定するか、またはstatefulのコンポーネントにするかの2つのオプションがあります。

Statelessコンポーネントは、レンダリング専用のダムコンポーネントでなければならず、すべてのロジックはstateful parent componentになければなりません。彼らはあなたがへの参照が必要な場合instances.Youはクラス にコンポーネントを変換する必要があります持っていない ので、あなたは機能部品のref属性を使用することはできませんdocs

によると

あなたが最初のケースで、ライフサイクル 方法や状態

を必要とするときあなたがちょうど同じように、

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