时间戳

首页 > 解决方案 > React JS - 如何将 json 数据绑定到下拉列表

json - React JS - 如何将 json 数据绑定到下拉列表

问题描述

我有一个反应 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 文件的所有信息，所以现在我正在尝试将客户端名称绑定到下拉列表。我能得到一些关于我做错了什么的指导吗？

标签： jsonreactjs

解决方案

在 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 个下拉菜单，其中填充了选项。

推荐阅读