根据React.Js中第一个下拉列表中的选择填充第二个下拉列表 [英] Populate 2nd dropdown based on selection from 1st dropdown in React.Js

问题描述

我正在学习反应并努力根据从第一个下拉列表中点击哪个选项来获得第二个下拉列表。

I am learning react and struggling to get a second dropdown to populate based on which option is clicked from first dropdown.

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

I have included my code below.

我认为问题在于我尝试设置 this.state.selected = param.tableName 。我不认为这会起作用，但我不确定要使用什么。

I think the issue is where I try to set this.state.selected = param.tableName. I don't think that will work, but I'm not sure what to use instead.

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

I need an onClick event to change the this.state.selected variable to the option that is selected I think, and then check when tableName === selected. I will also include my JSON below so the context is more clear.

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"
]
},

推荐答案

你做错了。您无法在< option> 上调用onClick方法。相反，你应该在< select> 上使用onChange方法（请参阅反应文档），如下所示：

You're doing it wrong way. You cannot call onClick method on <option>. Instead you should use onChange method on <select> (see react docs) like this:

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

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

Then on 'onChange' event you can set your state to the selected option. Let's understand this scenario with an example.

假设你有两个下拉列表。一个用于显示公司，一个用于与每个公司相对应的工作。每家公司都有自己的一系列工作：

Suppose you have two dropdowns. One for showing companies and one for jobs corresponding to each company. Each company has its own set of jobs like this:

 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数组来获取该特定公司对象并映射作业下拉列表。

Now you have to just set a state, lets say 'selectedCompany' and then filter the companies array by 'selectedCompany'. Then you can just get that particular company object and map your 'jobs' dropdown by iterating over jobs array inside the company object.

以下是代码段：
https://codepen.io/madhurgarg71/pen/pRpoMw

这篇关于根据React.Js中第一个下拉列表中的选择填充第二个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！