Рендеринг компонента количество раз на основе пользовательского ввода

Question

Я хочу сделать компонент количество раз, которое основано на пользовательском вводе. Например, у меня есть вопрос, который спрашивает, сколько ящиков вы хотите создать, с текстовым полем рядом с ним, где вы можете отправить число. Исходя из того, что это число, я хочу отображать блок на экране столько раз (учитывая, что я создал блок в другом файле). Как мне это сделать? Я делаю это в моем файле Box.js (ниже) или в файле App.js, где находится мой компонент? Мне нужно простое и подробное объяснение, потому что я новичок в React.

Мой код с использованием Bootstrap React:

const Box = (props) => {

return (

    <div>

        <Col xs={12} sm={8} md={8} lg={8} smOffset={2} mdOffset={2} lgOffset={2} >

            <Panel bsClass="panel">

                <Form horizontal>

                    <Row>
                      <Col componentClass={ControlLabel} lg={6}>
                        How many boxes do you want to create?
                      </Col>

                      <Col lg={4}>
                        <FormControl placeholder="Enter a number..." />
                      </Col>

                      <Col lg={2}>
                        <Button type="submit">
                          <FaArrowRight style={arrowStyle} />
                        </Button>
                      </Col>
                    </Row>

                </Form>

            </Panel>

        </Col>

    </div>
)

};

Answer 1

Вам, вероятно, понадобится что-то еще, кроме функционального компонента. Вам просто нужно сохранить входное значение в состоянии и визуализировать на основе этого. Очень простой пример:

const Box = React.createClass({
  getInitialState: function() {
    return {
      numItems: null
    };
  },
  render: function() {
    let items = [];
    
    for (let i = 0; i < this.state.numItems; i++) {
      items.push(<p key={i}>Item {i}</p>);
    }
  
    return <div>    
      <input 
        type="number"
        value={this.state.numItems}
        onChange={this.handleValueChange} />
        
        {items}
      </div>;
  },
  handleValueChange: function(e) {
    this.setState({
      numItems: e.target.value
    })
  }
});

ReactDOM.render(<Box />, document.getElementById('root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

1. Добавить состояние для подсчета количества ящиков
2. Обновление счетчика при нажатии на кнопку отправить
3. Компонент рендеринга на основе счетчика состояний (это произойдет автоматически после установки состояния)

Компонент коробки

class BoxComponent extends React.Component {
    render() {
    return (
        <div>BOX</div>
    );
  }
}

Получить пользовательский компонент ввода

class Box extends React.Component {
    constructor(props, context) {
    super(props, context);

    this.state = {
      numberOfBoxes:0
    };

  }

  updateBoxes(e) {
  e.preventDefault();
    this.setState({numberOfBoxes:e.target.value});

  }

  getBoxes(){
  var rows=[];
  for(var i=0;i<this.state.numberOfBoxes;i++ ){
  rows.push(<BoxComponent/>);
  }
  return rows;
  }
    render() {
    return (
        <div>

        <Col xs={12} sm={8} md={8} lg={8} smOffset={2} mdOffset={2} lgOffset={2} >

            <Panel bsClass="panel">

                <Form horizontal >

                    <Row>
                      <Col  lg={6}>
                        How many boxes do you want to create?
                      </Col>

                      <Col lg={4}>
                        <FormControl onChange={this.updateBoxes.bind(this)} placeholder="Enter a number..." />
                      </Col>

                      <Col lg={2}>
                        <Button type="submit">
          Submit
                        </Button>
                      </Col>
                    </Row>

                </Form>

{this.getBoxes()}
            </Panel>

        </Col>

    </div>
    );
  }
}

Проверьте следующие jsfiddle

https://jsfiddle.net/madura/yeu699on/1/

Обратите внимание, что в образце я добавил поля для визуализации при изменении счетчика на входе (событие onchange). Не в форме отправить событие. Вы можете добавить это в форму отправки события, имея ссылку (см. Ссылки на ссылки для получения дополнительной информации) на ваш вклад.