时间戳

首页 > 解决方案 > 在单击按钮上设置多个组件 - React

javascript - 在单击按钮上设置多个组件 - React

问题描述

我已经开发了一个计时器，我们可以在其上输入名称和时间（以秒为单位）来启动计时器。

我现在想创建一个按钮，如果单击，它会显示另一个带有名称的计时器，时间以秒为单位。

我不知道我该怎么做...

这是带有输入的计时器... https://jsfiddle.net/q806zeps/37/

我想如果我可以复制这个ReactDOM.render(<App/>, document.getElementById('timer'));，但我认为这是不可能的？

谢谢

标签： javascriptreactjs

解决方案

请看一下这段代码，希望它能解决你的问题。

class App extends React.Component {
constructor(props){
        super(props)
        this.state = {
         counter : 1
        }
     }
  //add timer code by oneshubh
  addTimer(){
            this.setState({counter: this.state.counter+1})
  }
  render(){ 
var timerDom = [];
  for(var i = 0;i<this.state.counter;i++){
    timerDom.push(<Wrapper />)
  }
  return (
        <div>
          {timerDom}
          <button onClick={()=>this.addTimer()} >add timer</button>
        </div>);
  }
}

推荐阅读