Question

我在React的一个小型节拍器应用程序上工作，我遇到了一个小问题。我想创建尽可能多的<Beats>输入值，但我不知道如何处理它。

请查看layout idea例如。

非常感谢您的帮助。

这是结构图。

Time_Signature_and_Beats_Holder
              |
              ├╌╌Time_Signature_Control
              |
              └╌╌Beats_Holder
                      |
                      └╌╌ Beats

简短摘要：

class Beat_Holder extends React.Component {
      render(){
        return(


          /*

            Render <Beat index={i} /> component this.props.NoFBeats times

          */


        )
      }
    }

整件：

class Time_Signature_and_Beats_Holder extends React.Component {

  constructor()
  {
    super()
    this.state = {
      Beats: 4
    }
  }

  //Callback function for number of elements I wanna generate

  Get_Beats(Number_Of_Beats){
        this.setState({Beats: Number_Of_Beats});
        console.log(Number_Of_Beats);
    }

  render(){
    return(
      <div>
        <Time_Signature_Control
          onGetBeats={this.Get_Beats.bind(this)}
        />
        <Beat_Holder NoFBeats = {this.state.Beats}/>
      </div>
    )
  }
}

class Time_Signature_Control extends React.Component {

  constructor()
  {
    let beats = 5;
    super();
    this.state = {value:beats}
  }

  handleChange(event)
  {
    let beats = event.target.value;
    this.setState({value: beats});
    this.props.onGetBeats(beats);
  }


  render(){
    return(
      <div classname="Time_Signature_Control">
        <p>Time Signature:</p>
        <input type="number" value={this.state.value} onChange={this.handleChange.bind(this)} id="bpme" min="2" max="50"></input>
          /
        <select id="Note_Length" name="Note">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="16">16</option>
            <option value="32">32</option>
        </select>
      </div>
    )
  }
}

class Beat_Holder extends React.Component {
  render(){
    return(


      /*

        Render <Beat index={i} /> component this.props.NoFBeats times

      */


    )
  }
}

class Beat extends React.Component {
  render(){
    return(
      <li>{this.props.index}</li>
    )
  }
}

Answer 1

基本上用React元素创建一个数组并使用它来渲染：

render() {

    const children = [...Array(this.state.Beats).keys()].map(beat => <Beat prop1={beat} />)

    return (
        <div>
            <Time_Signature_Control onGetBeats={this.Get_Beats.bind(this)}/>
            {children}
         </div> 
    )

}

通过更新state.Beats将自动添加更多

REACT JS - 基于输入值的元素数

1 个答案: