我有一个React JS文件,我正在尝试将数据绑定到下拉列表。数据存储在以下测试API / json文件中:https : //api.myjson.com/bins/okuxu …我想首先将客户端名称绑定到其相应的下拉列表。
样本json数据:
[ { "abc_buildingid": "11111112-64c2-5bd8-8b72-e92568694c76", "abc_energyprogramid": "5d84ef73-9b9a-475f-84e2-f307ad897df7", "siteName": "Construction One", "sampleCalibration": false, "clientName": "Client-1", "segmentName": "John Doe ES New Silver 4-7-2017-04-30-2018~25313~John Doe ES JDU Area Calibration~47851~Mod", "cfmRateFactor": 50 } ]
…这是我的代码:
import React, { Component } from 'react'; class Ast extends Component { constructor(){ super(); this.state = { data: [], }; } //end constructor bindDropDowns() { var clientName = document.getElementById('clientName').value for(var i=0; i < this.state.data.length; i++) { var clientName = this.state.data[i].clientName; } } componentWillMount() { fetch('https://api.myjson.com/bins/okuxu', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-type': 'application/json', }, /*body: JSON.stringify({ username: '{userName}', password: '{password}' })*/ }) /*end fetch */ .then(results => results.json()) .then(data => this.setState({ data: data }) ) } //end life cycle render() { console.log(this.state.data); return ( <div> <form> <div> <h2>Memeber Selection:</h2> <div> <div> <select className="custom-select" id="clientName" onSelect="bindDropDowns()"> <option selected>Client</option> </select> </div><br /> <div> <select className="custom-select" id="siteName"> <option selected>Site Building Name</option> </select> </div><br /> <div> <select className="custom-select" id="segmentName"> <option selected>Segments</option> </select> </div><br /> <div> <label for="example-text-input">Modify CFM Rate Factor:</label> <input class="form-control" type="textbox" id="cfmRateFactor" value="10" /> </div><br /> <div> <button type="submit" className="btn btn-primary">Submit</button> </div> </div> </div> </form> </div> ); } } export default Ast
我通过控制台确认“ this.state.data”包含json文件中的所有信息,因此现在我尝试将客户端名称绑定到下拉列表。请问我做错了什么指南?
在React中,您使用声明性方法而不是DOM操作:
<div> {['clientName', 'siteName', 'segmentName'].map(key => ( <select key={key}> {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)} </select> ))} </div>
这将生成3个下拉菜单,并填充选项。