Question

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

我在下面提供了我的代码。

我认为问题在于我尝试设置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"
]
},

Answer 1

你这样做错了。您无法在<option>上调用onClick方法。相反，您应该在<select>（see react docs）上使用onChange方法，如下所示：

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

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

Answer 2

要注意的一些事项：

您setState事件处理程序中对<option> onClick的调用中的语法看起来不正确。

您还尝试在this.state.selected条件中引用.filter而没有变量路径（this.state）

建议的解决方案：

// The .setState method expects an object to be passed to it rather
// than an expression that mutates the state directly

// Pass it an object containing the properties you want to change,
// ensure your use colon (':') rather than equals sign ('=') to set property:
<option key={i} onClick={
  this.setState({
    selected: param.tableName
  })
</option>


// In the <select> tag,
// you need to refer to the selected property in it as this.state.selected:

// Don't forget the closing select tag, it's missing from your snippet
<select>
{
  this.state.params
    .filter(tableName => (tableName === this.state.selected))
    .map(columns => columns.map(col => <option>{col}</option>))
}
</select>

Answer 3

事件处理程序，例如onClick必须是一个功能

this.setState需要一个对象，它将与状态合并因此，您在州内设置selected的部分必须

<option key={i} onClick={() => {
    this.setState({selected: param.tableName})
}>{param.tableName}}}</option>

您在过滤器中使用了未定义的变量（selected），你必须使用.filter(({tableName}) => tableName === this.state.selected)代替

Answer 4

这个问题可以通过在第二个输入上链接一个过滤器和映射来轻松解决，它根据第一个下拉列表的输入过滤它的选项。

            <select value={country} onChange={e => setCountry(e.target.value)}>
              {countries.map(country => (
                    <option value={country}>{country}</option>
                ))}
            </select>
            
            <select value={school} onChange={e => setSchool(e.target.value)}>
              {schools.filter(school => school.Country === country).map(school => (
                    <option value={school.Name}>{school.Name}</option>
                ))}
            </select>

上面我们有两个选择。第一个选择一个值，然后第二个的选项将基于此呈现。

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

4 个答案:

要注意的一些事项：

建议的解决方案：