当前，我沿这些行进行了设置，其中第二个下拉列表由先前的选择填充。

问题是第二个字段在第一个字段之后更新，我想让用户选择第二个字段中的选项（应该在第一个字段之后保留默认值）。

例如：如果用户选择了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;