Question

我有一个API来获取这样的对象：

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

我有一个父组件，它通过.map呈现子组件。子组件显示所有对象属性。

现在我必须更新每个单独的对象属性“评论”。

我正在使用带有 onChange 处理程序的input元素来使回调将子属性推送到父级。

儿童回调：

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

如何将属性分配（更新）到正确的对象属性。

Answer 1

＆＃13;

class Parent extends React.Component{
    constructor(props){
		super(props)
		this.state = {
            "objectAttributes": [
              {
                "id": "1",
                "Name": "First",
                "Comment": "First"
              },
              {
                "id": "2",
                "Name": "Second",
                "Comment": "Second"
              }
            ]
    	}
	}
	handleChange(i, val){
		const newArray = this.state.objectAttributes;
		newArray[i].Comment = val;
		this.setState({
			objectAttributes: newArray
		})
	}

	render(){
		return(
			<div>
            	{this.state.objectAttributes.map((ob, i)=>
					<div key={i}>{"Comment for "+ i+" object"} - {ob.Comment}</div>
				)}
				<h2>Change Comment value using below child components. Each input is a child.</h2>
            	{this.state.objectAttributes.map((ob, i)=>
					<Child ob = {ob} handleChange = {this.handleChange.bind(this)} index= {i} key = {i} />
				)}
			</div>
		)
	}
}

class Child extends React.Component{
	render(){
		return(
			<div>
                Change comment form here - 
				<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}/> 
			</div>
		)
	}
}


ReactDOM.render(
  <Parent />,
  document.getElementById("app")
)

＆＃13;

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

＆＃13;

你可以尝试这个，代码是自我解释的。

Answer 2

当通过迭代动态创建元素时，每个创建的元素都应具有唯一的键属性。 <element key='*your key here*'> 这允许做出反应以区分不同的元素。您可以找到有关此here

的更多信息

您的问题可能在其他地方，但如果没有更多代码，则很难排除故障。

通过嵌套表单更新对象

2 个答案: