Question

我正在尝试做什么：当用户点击按钮时，会呈现一个新组件（该组件包含图像）。

问题：我设置它的方式，当用户点击时，handleClick函数集将状态翻转为true，然后加载组件。但是，这仅适用一次。我希望它不断创造新的组件，而不是翻转开关，但我是一个相对较新的编码器，我无法弄清楚如何去做。

非常感谢这方面的帮助：）

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Card from './card.js';

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
        clicked: false
      };
   this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {
   this.setState({
     clicked: true
   });
 }


  render() {
    return (
      <div className="App">
      <h3 className="header">Random.</h3>


<div className="hi">
      <button onClick={this.handleClick}>Hit Me.</button>
</div>
      {this.state.clicked ? <Card /> : null}
      </div>
    );
  }
}

export default App;

Answer 1

设置状态以容纳数组。

this.state = { feedItems: [] }

每次点击，都会向项目中添加项目。

let { feedItems } = this.state;
feedItems = feedItems.slice();
feedItems.push({ imageUrl: 'some url' });
this.setState({ feedItems });

使用onClick（反应）渲染组件的最佳方法是什么？

1 个答案: