Question

我无法获得我所选择的＆＃34;选择＆＃34;点击事件中的元素。我已经发布了下面的主要代码，我认为这是导致问题的原因。我将在下面进一步发布完整的代码。

基本上我想在第一个下拉列表中点击一个项目，并根据该被点击的项目，将填充第二个下拉列表。我认为我的问题是在我的onClick函数中，＆＃34;选中：param.tableName＆＃34;

，我没有抓住任何东西或没有我想要的价值的东西，因为我的第二个下拉列表没有填充。

可疑问题代码:(特别是＆＃34;选择：param.tableName＆＃34;）

<select>{this.state.params.map((param, i) =>
                       <option key={i} onClick={() => {this.setState({selected: param.tableName})}}>{param.tableName}

                       </option>)}
                   </select>

REST代码：

import React from 'react';
   import axios from 'axios';
   class Search extends React.Component {
       constructor(props) {
           super(props)
           this.state = {
               params: [],
               columnParams: [],
               selected: ''
           }
       }

       componentWillMount() {
           axios.get('http://localhost:3010/api/schema')
           .then( response => {
               this.setState({params: response.data})
           })
       }
       render() {
           return (
               <div className="Search">
                   <select>{this.state.params.map((param, i) =>
                       <option key={i} onClick={() => {this.setState({selected: param.tableName})}}>{param.tableName}

                       </option>)}
                   </select>
                   <select>{this.state.params
                           .filter(({tableName}) => tableName === this.state.selected)
                           .map(({columns}) =>
                               columns.map((col) =>
                       <option>{col}</option>))}
                   </select>
                   <input>
                   </input>
                   <select>
                   </select>
                   <button>
                   Go!
                   </button>
               </div>
               );
       }
   }
   export default Search

JSON：

   [
   {
   "tableName": "customer",
   "columns": [
   "customerid",
   "title",
   "prefix",
   "firstname",
   "lastname",
   "suffix",
   "phone",
   "email"
   ]
   },
   {
   "tableName": "product",
   "columns": [
   "productid",
   "name",
   "color",
   "price",
   "productadjective",
   "productmaterial"
   ]
   },
   {
   "tableName": "orderlineitem",
   "columns": [
   "orderid",
   "productid",
   "quantity"
   ]
   },
   {
   "tableName": "order",
   "columns": [
   "orderid",
   "customerid",
   "amount",
   "date"
   ]
   }
   ]

无法访问被点击的参数的值

0 个答案: