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

Я хочу отображать компонент столько раз, сколько раз это зависит от пользовательского ввода. Например, у меня есть вопрос, который спрашивает, сколько полей вы хотите создать, с текстовым полем рядом с ним, где вы можете указать число. Основываясь на том, что это за число, я хочу отобразить блок на экране столько раз (учитывая, что я создал блок в другом файле). Как мне это сделать? Делать ли это в моем файле 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>
)

};


reactjs conditional-rendering render react-bootstrap rendering
person ChloeH    schedule 28.06.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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>

person Valentin    schedule 28.06.2017

arrow_upward
1
arrow_downward

  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). Не к событию отправки формы. Вы можете добавить это, чтобы сформировать событие отправки со ссылкой (проверьте реакцию ссылок для получения дополнительной информации) на ваш ввод.

person Madura Pradeep    schedule 28.06.2017