Question

我有一个反应JS文件，我正在尝试将数据绑定到下拉列表。数据存储在以下测试API / json文件中：https://www.browserling.com/tools/base58-encode ...我想首先将客户端名称绑定到它的相应下拉列表。

示例json数据：

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

...这是我的代码：

su – Jenkins –s /bin/bash

我通过控制台确认“this.state.data”包含json文件中的所有信息，所以现在我试图将客户端名称绑定到下拉列表中。我可以请一些关于我做错的指导吗？

Answer 1

在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个下拉列表并填充选项。

Answer 2

在this.state中定义json-

CityNames : {
                CityName : 
                    [
                        {CityKey : 1,CityDescription: 'abc'},
                        {CityKey : 2,CityDescription: 'xyz'}
                    ]

        }

这是下拉列表的代码

<select className="form-control">
          <option>---select---</option>
            {
            this.state.CityNames &&
            this.state.CityNames.CityName.map((h, i) => 
            (<option key={i} value={h.CityName}>{h.CityDescription}</option>))
            }
</select>

Answer 3

虽然您的问题不明确，但我认为您希望将api数据填充到相应的下拉列表中

将数据填充到相应的下拉列表中

    <div>
   <select className="custom-select" id="clientName" onSelect="bindDropDowns()">
      this.state.data.map((obj) => 
      <option key={obj.clientName}>{obj.clientName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="siteName">
                this.state.data.map((obj) => 
      <option key={obj.siteName}>{obj.siteName}</option>
      );
   </select>
</div>
<br />
<div>
   <select className="custom-select" id="segmentName">
                         this.state.data.map((obj) => 
      <option key={obj.segmentName}>{obj.segmentName}</option>
      );
   </select>
</div>
<br />

Answer 4

如果要将数据保存在单独的json文件中；

您可以这样声明数据。

c_int

我们假设它在一个名为“ citys.jsx”的文件中

您可以将文件导入到下拉列表所在的组件中。

>>> import ctypes
>>> i = ctypes.c_int()
>>> i
c_int(0)
>>> i.value = 10
>>> i
c_int(10)

（提供正确的文件路径）。

然后您可以在表单控件上使用它。

export const Cities = {
    cities : [
        { Key: 1, Value: 'London' },
        { Key: 2, Value: 'New York' },
        { Key: 3, Value: 'Colombo' }    
    ]
}

export default Cities;

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

4 个答案: