Question

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

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

我不知道该怎么做...

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

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

谢谢

Answer 1

您可以使用状态为Wrapper的数组来跟踪应用程序中的各个计时器。

state: {
    timers: []
}

单击按钮，使用当前键将一个对象添加到您的状态。

{
      libelle: 'Input name',
      seconds: 10
}

遍历此数组，以通过传递正确的索引来呈现Minuteur个组件。

这是您的小提琴的更新后的叉子。 Creating timers using an array

Answer 2

请看看这个code，希望它能解决您的问题。

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>);
  }
}

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

2 个答案: