时间戳

首页 > 解决方案 > 每次在 UI 上单击按钮时显示一个附加元素/按钮。反应.js

javascript - 每次在 UI 上单击按钮时显示一个附加元素/按钮。反应.js

问题描述

我目前正在研究 React.js 项目。我是初学者。在下面的代码中，我试图创建一个额外的按钮，每次使用 setState 单击它时都会显示“Hello World”。有人可以帮我添加到 DisplayMethod() 函数吗？

class MessageDisplayed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: "Hello World"};
    this.DisplayMessage = this.DisplayMessage.bind(this);
  }
  
  DisplayMessage() {
    this.setState(state => ({
      //How can I insert more "Hello World" buttons everytime it's clicked?"
    
    }))
  }
  
  render(){
    
    
    return (
      <button onClick={this.DisplayMessage}><h1>{this.state.message}</h1></button>
    )
  }
}



ReactDOM.render(
  <MessageDisplayed />,
  document.getElementById("root")
);

标签： javascriptreactjs

解决方案

在处理程序中，您可以简单地将“Hello World”附加到功能状态更新的前一个状态对象。

DisplayMessage() {
  this.setState(state => ({
    message: state.message + "Hello World"
  }))
}


class MessageDisplayed extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello World" };
    this.DisplayMessage = this.DisplayMessage.bind(this);
  }
  
  DisplayMessage() {
    this.setState(state => ({
      message: state.message + "Hello World"
    }))
  }
  
  render(){
    return (
      <button onClick={this.DisplayMessage}><h1>{this.state.message}</h1></button>
    )
  }
}

ReactDOM.render(
  <MessageDisplayed />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

带有外部消息文本

const message = "Hello World";

class MessageDisplayed extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message };
    this.DisplayMessage = this.DisplayMessage.bind(this);
  }
  
  DisplayMessage() {
    this.setState(state => ({
      message: state.message + message
    }))
  }
  
  render(){
    return (
      <button onClick={this.DisplayMessage}><h1>{this.state.message}</h1></button>
    )
  }
}

ReactDOM.render(
  <MessageDisplayed />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

推荐阅读