經由嵌套表格

-1

更新對象我有一個API的取這樣的對象：經由嵌套表格

{ 
    "objectAttributes": [ 
     { 
     "id": "1", 
     "Name": "First", 
     "Comment": "First" 
     }, 
     { 
     "id": "2", 
     "Name": "Second", 
     "Comment": "Second" 
     } 
    ] 
}

我有一個父組分，其經由.MAP呈現子組件。子組件顯示所有對象屬性。

現在我必須更新每個單獨的對象屬性「評論」。

我使用的輸入元件都具有的onChange處理程序作出回調推子屬性到父。

兒童回調：

CommentChanged (val) { 
    this.setState({ Comment: val }) 
    this.props.newServiceComment(this.state.Comment) // pass props to parent 
    }

兒童輸入形式：

<Input 
     onChangeText={this.CommentChanged} 
     ref='Comment' 
     value={this.props.Comment} 
    />

家長回調：

// push one Comment to objectAttributes 
    addServiceComment (Comment) { 
    this.state.objectAttributes.push(Comment) 
    }

父渲染部分：

{ objectAttributes.map(service => 
    <Child 
     serviceKey={service.id} 
     serviceName={service.Name} 
     // add ServiceComment to parent 
     newServiceComment={service.Comment} 
    /> 
)}

如何分配（更新）屬性到正確的對象屬性。

來源

2017-05-31 Claus Shapeshifter

那麼你的問題是什麼？ – Sylvain

你給你的孩子分配了一個鑰匙嗎？ – Sylvain

添加代碼可能有助於澄清您的問題 – hindmost

class Parent extends React.Component{ 
 
    constructor(props){ 
 
\t \t super(props) 
 
\t \t this.state = { 
 
      "objectAttributes": [ 
 
       { 
 
       "id": "1", 
 
       "Name": "First", 
 
       "Comment": "First" 
 
       }, 
 
       { 
 
       "id": "2", 
 
       "Name": "Second", 
 
       "Comment": "Second" 
 
       } 
 
      ] 
 
    \t } 
 
\t } 
 
\t handleChange(i, val){ 
 
\t \t const newArray = this.state.objectAttributes; 
 
\t \t newArray[i].Comment = val; 
 
\t \t this.setState({ 
 
\t \t \t objectAttributes: newArray 
 
\t \t }) 
 
\t } 
 

 
\t render(){ 
 
\t \t return(
 
\t \t \t <div> 
 
      \t {this.state.objectAttributes.map((ob, i)=> 
 
\t \t \t \t \t <div key={i}>{"Comment for "+ i+" object"} - {ob.Comment}</div> 
 
\t \t \t \t)} 
 
\t \t \t \t <h2>Change Comment value using below child components. Each input is a child.</h2> 
 
      \t {this.state.objectAttributes.map((ob, i)=> 
 
\t \t \t \t \t <Child ob = {ob} handleChange = {this.handleChange.bind(this)} index= {i} key = {i} /> 
 
\t \t \t \t)} 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 
class Child extends React.Component{ 
 
\t render(){ 
 
\t \t return(
 
\t \t \t <div> 
 
       Change comment form here - 
 
\t \t \t \t <input type = "text" placeholder = {"change comment property of object " + this.props.index} onChange = {(e)=>this.props.handleChange(this.props.index, e.target.value)} value = {this.props.ob.Comment}/> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 

 
ReactDOM.render(
 
    <Parent />, 
 
    document.getElementById("app") 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

你可以試試這個，代碼是自我解釋。

來源

2017-05-31 16:13:17 nrgwsth

非常感謝。很棒 –

@ClausShapeshifter很高興幫助。這個答案花了我很多時間:) – nrgwsth

當通過迭代動態創建元素並進行反應時，每個創建的元素都應該具有唯一的鍵屬性。 <element key='*your key here*'> 這允許反應來區分不同的元素。關於這個問題的更多信息here

你的問題可能在其他地方，但沒有更多的代碼很難排除故障。

來源

2017-05-31 15:48:33 Sylvain

經由嵌套表格

回答

相關問題