Question

我试图使用React Components渲染.json中的所有项目。到目前为止，这是我的代码：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      load: '',
      projectInfo:{
        "projects":[]
      }
    }
  }

  getProjectInfo(){
    $.ajax({
      url:'http://localhost:3000/projectInfo.json',
      dataType:'json',
      cache: false,
      success: function(data){
        this.setState({projectInfo: data});
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
        alert(err);
      }
    });
  }

  componentDidMount(){
    this.getProjectInfo();
  }

  handleClick = (value) => {
    this.setState({load: value});
  }

  display(app){
    if(app == 'bmi') {
      return <Bmi />
    }
    if (app === 'js') {
      return <Js />
    }
    else return "";
  }

  render() {
    if(this.state.projectInfo){
      var projects = this.state.projectInfo.projects.map(function(project){
        return (<Project id={project.id}
                         projectName={project.name}
                         projectDescription={project.description}
                         imgAddress={project.imgAddress}
                         onClick={this.handleClick}/>)
      })
    }
    return (
      <div className="App">

        <div className="App-header">

          <h2>React Test</h2>

        </div>
        <div className="box">
          {projects}

        </div>
        <div className={this.state.load}>
          {this.display(this.state.load)}
        </div>

      </div>

    );
  }
}

export default App;

我遇到onClick问题，得到TypeError：无法读取属性＆＃39; handleClick＆＃39;未定义的。我认为问题在于，当我使用{this.handleClick}时，＆＃39;这个＆＃39;指项目＆＃39;传递给函数，但我不知道如何绕过它。

当我手动列出要渲染的所有项目组件时，这可以正常工作。

Answer 1

您没有为this的上下文绑定地图，但由于您使用的是() =>表示法，因此您可以使用自动绑定，例如。

  var projects = this.state.projectInfo.projects.map(project => {
      return (<Project id={project.id}
                     projectName={project.name}
                     projectDescription={project.description}
                     imgAddress={project.imgAddress}
                     onClick={this.handleClick}/>)
  })

编辑：

要传递更多参数，您必须使用onClick的回调，例如

 onClick={() => this.handleClick(project.id)}

Answer 2

在跳转到this.handleClick

之前，将map保存到变量中

if(this.state.projectInfo){
  var handle = this.handleClick
  var projects = this.state.projectInfo.projects.map(function(project){
    return (<Project id={project.id}
                     projectName={project.name}
                     projectDescription={project.description}
                     imgAddress={project.imgAddress}
                     onClick={handle}/>)
  })
}

Answer 3

您需要绑定到正确的上下文。您可以执行此操作

.overflow-content .ui-datatable-tablewrapper table { 
    overflow: auto;
    width: 2500px;
}

OR

在构造函数
中

 onClick={this.handleClick.bind(this)}

Answer 4

在构造函数内部将 this 绑定到函数

Double saleprice=145236.12;
int itemqountity=1500;
Double totalamount= saleprice*itemqountity;
Log.e("totalamount",""+totalamount);

Answer 5

嗨，你有上下文的问题。我的建议是创建适当的功能来处理点击

handleClick(value){
    this.setState({load: value});
 }

将lambda函数添加到：

if(this.state.projectInfo){
      var projects = this.state.projectInfo.projects.map((project) => {
        return (<Project id={project.id}
                         projectName={project.name}
                         projectDescription={project.description}
                         imgAddress={project.imgAddress}
                         onClick={()=>{this.handleClick(project.id);}}/>)
      })
    }

我不确定你需要传递哪种参数来处理点击功能，但我猜这是project.id

React：如何使用相同的onClick和不同的drop来渲染相同的组件

5 个答案: