根據用戶輸入呈現組件的次數

我想呈現一個組件的基於用戶輸入的次數。例如，我有一個問題，詢問您要創建多少個文件夾，並在文件夾旁邊提供一個數字。基於任何數字，我想要在屏幕上呈現該時間量（假設我在另一個文件中創建了一個框）。我該怎麼做呢？我是在我的Box.js文件（下面）或我的組件是App.js文件中執行此操作嗎？我需要一個簡單而詳細的解釋，因爲我是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> 
)

};

來源

2017-06-28 ChloeH

您可能需要別的東西而不是功能組件。您只需將輸入值存儲在狀態中並根據此值進行呈現。一個非常簡單的例子是：

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>

來源

2017-06-28 16:58:15 Valentin

添加的狀態來算箱數
更新計數時，點擊提交
基於狀態數呈現盒組件（一旦你設置了狀態，這將自動發生）

箱部件

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事件）。不提交表單提交事件。您可以將其添加到表單提交事件中，並參考（請參閱更多信息，以瞭解更多信息）。

來源

2017-06-28 17:25:37

根據用戶輸入呈現組件的次數

回答

相關問題