React-如何在不更新第二个默认字段的情况下，根据以前的DropDown填充一个DropDown

Question

目前，我有一个沿着这些行的设置，其中第二个下拉列表由以前的选择填充。

问题是第二个字段在第一个字段之后更新，我想让用户在第二个域中选择选项(第一个字段后应保持默认(。

例如：如果用户选择Mazda，则什么都没有发生，第二个字段仍然显示"选择您的车型"，但在幕后它会更新，当用户单击第二个域时，它将看到基于第一个字段的选项

额外的好处：我也很感激这个解决方案的另一个干净的代码(不确定我是否做得很好(。

import React from 'react';
import ReactDOM from 'react-dom';
const lookup = {
"def": [
{ id: '1', text: 'Choose your model' },
],
"mazda": [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' }
],
"bmv": [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' }
]
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
dataValue: 'def'
}
}
onChange = ({ target: { value } }) => {
this.setState({ dataValue: value });
}
render() {
const { dataValue } = this.state;
const options = lookup[dataValue];
return (
<div>
<select onChange={this.onChange}>
<option value="def">Choose your car</option>
<option value="mazda">Mazda</option>
<option value="bmv">BMV</option>
</select>
<hr />
<select>
{options.map(o => <option key={o.id} value={o.id}>{o.text}</option>)}
</select>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;

Answer 1

对我来说，更干净的方法是一个具有记忆值的功能组件。只有当第一个选择不在默认值上时，才会启用第二个选择。第二次选择的默认值排列在可能的选项前面。

import React, { useMemo, useState } from 'react';
import ReactDOM from 'react-dom';
const lookup = {
def: [{ id: '0', text: 'Choose your model' }],
mazda: [
{ id: '1', text: '1' },
{ id: '2', text: '2' },
{ id: '3', text: '3' },
{ id: '4', text: '4' },
{ id: '5', text: '5' },
],
bmv: [
{ id: 'a', text: 'a' },
{ id: 'b', text: 'b' },
{ id: 'c', text: 'c' },
{ id: 'd', text: 'd' },
{ id: 'e', text: 'e' },
],
};
function App() {
const [dataValue, setDataValue] = useState('def');
const options = useMemo(() => lookup[dataValue], [dataValue]);
const onChange = ({ target: { value } }) => {
setDataValue(value);
};
return (
<div>
<select onChange={onChange}>
<option value='def'>Choose your car</option>
<option value='mazda'>Mazda</option>
<option value='bmv'>BMV</option>
</select>
<hr />
<select disabled={dataValue === 'def'}>
{[...lookup.def, ...options].map(({ id, text }) => (
<option key={id} value={id}>
{text}
</option>
))}
</select>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;

Answer 2

如果您想在功能组件中实现，请检查以下内容：

// import logo from './logo.svg';
// import './App.css';
import { useState } from 'react';
function App() {
var [companies, setCompanies] = useState([
{ 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']}
])
var [selectedCompany, setSC] = useState('company1');
function handleChange (e) {
console.log(selectedCompany, e.target.value)
setSC(e.target.value)
}
function render () {
let company = companies.filter(company => {
return company.name === selectedCompany
})
return (
<div>
jobs
<select>
{
company[0].jobs.map((job, i) => {
return <option>{job}</option>
})
}
</select>

companies
<select value={selectedCompany} onChange={handleChange}>
{
companies.map((company, i) => {
return <option>{company.name}</option>
})
}
</select>
</div>
)
}
return (
<div className="App">
{render()}
</div>
);
}
export default App;