Question

您好，我正在尝试渲染使用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;

Answer 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组件。

Answer 2

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

如何渲染React组件onClick？

2 个答案: