反应-如何基于先前的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

更清洁的方法对我来说将是一个具有记忆价值的功能组件。仅当第一个选择未使用默认值时，才会显示第二个选择。第二个选择的默认值散布在可能的选项之前。