小编典典

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

reactjs

我正在学习做出反应,并努力从第二个下拉列表中单击哪个选项来填充第二个下拉列表。

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

我认为问题是我试图解决的地方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"
]
},

阅读 260

收藏
2020-07-22

共1个答案

小编典典

您做错了方式。您不能在上调用onClick方法<option>。相反,您应该在on上使用onChange方法<select>请参见react
docs
),如下所示:

<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”过滤公司数组。然后,您可以通过迭代公司对象内的Jobs数组来获取该特定公司对象并映射“ jobs”下拉列表。

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

2020-07-22