Question

我有Issue.js，IssueItems.js和作为父项的App.js，我想在点击时更新问题项目中的内容。以下是我的代码：

class App extends Component {

  constructor(){
    super();
    this.state = {
         issues: [],
    }
  this.update_description= this.update_description.bind(this);
  }
  update_description(){
     this.setState({ issues:[
     {
      title: 'Issue 11'
     },
     ],
     })
  }
  render() {
    return (
      <div className="box-2">
            <h2> Issues </h2>
            <Issues className="Iss" issues={this.state.issues}/>
            </div>

    );
 }
}

import React, { Component } from 'react';
import IssueItem from './IssueItem';


class Issues extends Component {

  render() {
    let issueItems;
    if(this.props.issues){
      issueItems = this.props.issues.map(issue =>{
        return(
          <IssueItem key={issue.title} issue={issue} update_description = 
{this.props.update_description}/>
       );
      });
    }

    return (
      <div className="Iss" >
       {issueItems}
      </div>
    );
  }
}

export default Issues;

import React, { Component } from 'react';



class IssueItem extends Component {

  render() {
    return (
      <li onClick = {this.props.update_description} type="circle" 
className="Iss">
         {this.props.issue.title}
     </li>
    );
  }
}

export default IssueItem;

为什么这不起作用的任何想法？它不会给出任何错误，但它不会更新问题标题。在初始状态，问题是5，标题从01到05.我使用componentWillMount（）

创建它们

Answer 1

您永远不会将update_description（）方法作为属性传递给您的Issues组件，因此无法访问它。如果您更改App.js的render方法以包含它应该工作的属性：

{{1}}

如何在react中更新子内容？

1 个答案: