React JS-如何将json数据绑定到下拉列表 [英] React JS - How do I bind json data to a dropdown list

问题描述

我有一个React JS文件，我正在尝试将数据绑定到下拉列表.数据存储在以下测试API/json文件中: https://api.myjson.com/bins /okuxu ...我想首先将客户端名称绑定到其相应的下拉列表.

I have a react JS file and I'm attempting to bind data to a dropdown list. The data is stored in the following testing API/json file: https://api.myjson.com/bins/okuxu ...I want to start by binding the client name to it's respective dropdown list.

示例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
    }
]

...这是我的代码:

...this is my code:

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文件中的所有信息，因此现在我尝试将客户端名称绑定到下拉列表.关于我做错了什么，请给我一些指导吗?

I confirmed via the console that "this.state.data" contains all the information from the json file, so now I'm attempting to bind the client names to a dropdown list. Could I please get some guidance as to what I'm doing wrong?

推荐答案

在React中，您使用声明性方法而不是DOM操作:

In React, you use a declarative approach instead of DOM manipulation:

<div>
  {['clientName', 'siteName', 'segmentName'].map(key => (
    <select key={key}>
      {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
    </select>
  ))}
</div>

这会生成3个下拉菜单，其中填充了选项.

This generates the 3 dropdowns with the options populated.

这篇关于React JS-如何将json数据绑定到下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！