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

添加状态以计算方框数
点击提交时更新计数
根据状态计数渲染框组件（一旦设置状态，这将自动发生）

Box Component

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事件）时，我添加到渲染框的示例中。不是表单提交事件。您可以将此添加到表单提交事件中，并在您的输入中引用（检查反应参考以获取更多信息）。

根据用户输入

2 个答案: