我正在学习做出反应,并努力从第二个下拉列表中单击哪个选项来填充第二个下拉列表。
我在下面包含了我的代码。
我认为问题是我试图解决的地方this.state.selected = param.tableName。我认为这行不通,但是我不确定该用什么。
this.state.selected = param.tableName
我需要一个onClick事件来将this.state.selected变量更改为我认为的所选选项,然后检查tableName === selected。我还将在下面包含我的JSON,因此上下文更加清晰。
onClick
this.state.selected
tableName === selected
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>。相反,您应该在on上使用onChange方法<select>(请参见react docs),如下所示:
<option>
<select>
<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