ReactJS和Meteor：生成<select>選項？

我正在使用React和Meteor生成關於目錄中項目的信息表。我還製作了一個表單，以便用戶可以添加新項目。每個項目都有一個名稱，價格和製造商。當我製作所有的輸入文本區域時，這種方法非常好，但我想讓製造商輸入帶有根據名爲製造商的Meteor集合生成的標籤。ReactJS和Meteor：生成<select>選項？

Form = React.createClass({ 
    propTypes: { 
    manufacturer: React.PropTypes.object.isRequired 
    }, 
    renderOptions(){ 
    return(<option value={this.props.manufacturer.name}>{this.props.manufacturer.name}</option>); 
    }, 
    submitItem(event){ 
    event.preventDefault(); 
    var name=React.findDOMNode(this.refs.nameInput).value.trim(); 
    var price=React.findDOMNode(this.refs.priceInput).value.trim(); 
    var manufacturer=React.findDOMNode(this.refs.manufacturerInput).value.trim(); 
    Items.insert({ 
     name: name, 
     price: price, 
     manufacturer: manufacturer, 
    }); 
    React.findDOMNode(this.refs.nameInput).value=""; 
    React.findDOMNode(this.refs.priceInput).value=""; 
    }, 
    render(){ 
    return(
     <footer> 
     <form className="new-item" onSubmit={this.submitItem}> 
      <input type="text" ref="nameInput" placeholder="Name" required /> 
      <input type="text" ref="priceInput" placeholder="Price" required /> 
      <button onClick={this.submitItem}>ADD</button> 
     </form> 
     <select ref="manufacturerInput" defaultValue="" required /> 
      <option value="" disabled>Manufacturer</option> 
      {this.renderOptions()} 
     </select> 
     </footer> 
    ); 
    } 
});

如何使這項工作？我一整天都在試圖弄清楚自己的頭髮，但流星只是不停地告訴我「（38：8）預期相應的JSX結束標記」。我在這裏做錯了什麼？當它們全部運行時它工作得很好，但是這破壞了我的整個應用程序。

來源

2015-09-25 user5104897

你不小心關閉在這裏您select元素：

<select ref="manufacturerInput" defaultValue="" required />

取出/。

來源

2015-09-25 19:27:42

謝謝！我的應用程序構建成功，但現在我有一個不同的問題：React告訴我「警告：失敗propType：必需的prop製造商'沒有在'Form'中指定檢查App的渲染方法form.jsx：6 「在控制檯中。但是這個道具代碼與我在其他需要訪問數據的組件中使用的相同，例如實際顯示項目的表。是什麼賦予了？ – user5104897

'propTypes'用於驗證傳遞的內容。在渲染這個組件時你是否傳遞了''製造者'道具？ '<製造商= {someObj} />' –

好的，再次感謝。我解決了這個問題，現在它每次都使用默認選項和生成的選項渲染五次（每個製造商一次），哈哈！我現在要做的就是... – user5104897

ReactJS和Meteor：生成<select>選項？

回答

相關問題