如何渲染反应组件onClick？答案

【问题标题】：How to render react component onClick?如何渲染反应组件onClick？
【发布时间】：2020-07-17 12:37:56
【问题描述】：

您好，我正在尝试渲染我使用 onClick 函数制作的 PostOnWall 组件。目标是每次有人单击按钮时，handleClick 都会在屏幕上呈现一个新组件。因此，如果我三次单击该按钮，我应该会在我的屏幕上看到三个 PostOnWall 组件。请告诉我我做错了什么。

class Textbox extends Component {
    constructor(props) {
      super(props);
      this.handleClick.bind(this);
      this.state = {
        textArea: "",
        text: "",
        show: false,
        curTime : new Date().toLocaleString(),

      };
    }

    handleChange(event) {
      const myValue = event.target.value;
      this.setState({
        textArea: myValue
      })
      console.log(this.state)
    }

    handleClick= () => {
      this.setState({text:this.state.textArea,
      show: !this.state.show});
      return (
      <div>
          {this.state.show &&   <PostOnWall PostOnWall={this.props.PostOnWall} text={this.state.text} time={this.state.curTime}/>}
        </div>
        );
    }


    showNewPost

      render() {
        return (
        <div>
            <textarea className="Textbox" 
            rows="2" cols="30"
             type = "text" 
             onChange={this.handleChange.bind(this)}
             value={this.state.textArea} >
            </textarea>
              <button className="postbutton" onClick={this.handleClick.bind(this)}>Post</button>
        </div>

        );
    }
  }



export default Textbox;

【问题讨论】：

从onClick 处理程序返回组件将什么也不做。您需要在 render 方法中添加PostOnWall 组件。您可以在本地状态下创建一个数组，每次单击按钮时都会向该状态添加一个组件，然后在 render 方法中渲染该组件数组

标签： reactjs

【解决方案1】：

这应该对你有用；

import React, { Component } from 'react';

class Textbox extends Component {
  constructor(props) {
    super(props);
    this.handleClick.bind(this);
    this.state = {
      textArea: '',
      text: '',
      show: false,
      curTime: new Date().toLocaleString(),

    };
  }

  handleChange = (event) => {
    const myValue = event.target.value;
    this.setState({
      textArea: myValue
    });
  }

  handleClick= () => {
    this.setState({
      text: this.state.textArea,
      show: !this.state.show
    });
  }

  render() {
    return (
      <div>
        <textarea
          className="Textbox"
          rows="2"
          cols="30"
          type="text"
          onChange={this.handleChange.bind(this)}
          value={this.state.textArea}
        />
        <button
          className="postbutton"
          onClick={this.handleClick}
          type="button"
        >
          Post
        </button>
        {
          this.state.show &&
            <PostOnWall
              PostOnWall={this.props.PostOnWall}
              text={this.state.text}
              time={this.state.curTime}
            />
        }
      </div>

    );
  }
}

您应该使用单击时调用的函数来仅更改状态。然后根据状态值渲染（或不渲染）PostOnWall 组件。

【讨论】：

是的，这是我想出的第一个解决方案，但它所做的只是隐藏和显示组件。每次单击按钮时，我都想渲染一个新的 PostOnWall 组件
然后只需在状态中添加一个帖子数组并在渲染中使用地图，就像： { posts.map((post) => ());

【解决方案2】：

您需要添加在单击时增加的状态，然后根据单击按钮的次数来渲染组件。这里是codeSandbox，你想要实现的目标。

【讨论】：