如何使用reactj在下拉列表中显示json数据 [英] how to display json data in dropdown using reactj

问题描述

我需要在下拉菜单中显示数据，我还没有提供带有代码的json数据.

i need to display data in dropdown i haven given json data with code.

        this.setState({
           data : [
                         {id:1,type:A},
                         {id:1,type:B},
                         {id:1,type:C},
                   ]
                })


            <select className="form-control"  onChange={(e) => this.handleChange(e)}  >
                    <option >Select data</option>
                        {
                        this.state.data.map((i, h) => 
                        (<option key={h} value={i.type}>{i.type}</option>))
                        }
            </select>   

推荐答案

Json是不正确的...对字符串类型值-"A"，"B"，"C"的引号

Json isn't correct...put quotation for string type value-"A", "B", "C"

data: [{ id: 1, type: "A" }, { id: 1, type: "B" }, { id: 1, type: "C" }]

JSX

class App extends Component {
  state = {
    data: [{ id: 1, type: "A" }, { id: 1, type: "B" }, { id: 1, type: "C" }]
  };
  handleChange = e => {
    console.log(e.target.value);
  };
  render() {
    return (
      <div>
        <select className="form-control" onChange={this.handleChange}>
          <option>Select data</option>
          {this.state.data.map((i, h) => (
            <option key={h} value={i.type}>
              {i.type}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

这篇关于如何使用reactj在下拉列表中显示json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！