Реакция - Как заполнить один 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;