根据 React.Js 中第一个下拉列表中的选择填充第二个下拉列表

我正在学习反应并努力根据从第一个下拉列表中单击的选项来填充第二个下拉列表。

我在下面包含了我的代码。

我认为问题在于我尝试设置的位置this.state.selected = param.tableName。我认为这行不通，但我不知道该用什么来代替。

我需要一个onClick事件来改变this.state.selected我认为所选选项的变量，然后检查何时tableName === selected。我还将在下面包含我的 JSON，以便上下文更加清晰。

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(this.state.selected ={param.tableName})}>
                        {param.tableName}
                    </option>)}
                </select>
                <select>
                  {
                    this.state.params
                      .filter(({tableName}) => tableName === selected)
                      .map(({columns}) => columns.map((col) =><option>{col}</option>))}

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

你这样做的方式是错误的。您无法调用 onClick 方法<option>。相反，你应该使用 onChange 方法<select> (请参阅反应文档 https://facebook.github.io/react/docs/forms.html） 像这样：

<select onChange={this.handleChange} >
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

然后，在“onChange”事件中，您可以将状态设置为所选选项。让我们通过一个例子来理解这个场景。

假设您有两个下拉菜单。一种用于显示公司，另一种用于显示每个公司对应的职位。每个公司都有自己的职位，如下所示：

 companies:[
    { name: 'company1',  jobs: ['job1-1', 'job1-2', 'job1-3']},
    { name: 'company2', jobs: ['job2-1', 'job2-2', 'job2-3']},
    { name: 'company3', jobs: ['job3-1', 'job3-2', 'job3-3']}
  ]

现在您只需设置一个状态，假设为“selectedCompany”，然后按“selectedCompany”过滤公司数组。然后，您可以获取该特定的公司对象，并通过迭代公司对象内的职位数组来映射您的“职位”下拉列表。

这是代码片段： https://codepen.io/madhurgarg71/pen/pRpoMw https://codepen.io/madhurgarg71/pen/pRpoMw