onClick не работает при первом нажатии для TextField API FormControl MaterialUI

Question

В моем приложении React я использую TextField API управления формой MaterialUI. В теге Select я запускаю метод onClick, но он срабатывает только после первого щелчка. У меня нет скрытых CSS, примененных к этим тегам. Вот следующий фрагмент:

                    <FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
                        <InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
                        <Select
                            native
                            label="Select-Template"
                            onClick={this.GetTemplates}

                        >
                            {templates.length &&
                                templates.map(x => (
                                    <option
                                        key={x.template_id}
                                        value={JSON.stringify(x.template_content)}
                                        style={{ border: 'solid' }}>
                                        {x.template_name}
                                    </option>
                                ))}
                        </Select>
                    </FormControl>

Функция:

GetTemplates = e => {
    XRayApi.getTemplates(this.getTemplatesApiResponse);
};

Я вообще не могу выяснить причину. Любая помощь по этому поводу?

Answer 1

Попробуйте onChange вместо onClick в Select.

<Select
  native
  label="Select-Template"
  onChange={this.GetTemplates}
>

Answer 2

Вы должны использовать onChange={this.GetTemplates} в своем коде, чтобы он заработал. Согласно официальным документам API материала-ui> select, onClick недоступен. Теперь ваш код станет

<FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
  <InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
  <Select
  native
  label="Select-Template"
  onChange={this.GetTemplates}>
        {templates.length &&
            templates.map(x => (
                <option
                    key={x.template_id}
                    value={JSON.stringify(x.template_content)}
                    style={{ border: 'solid' }}>
                    {x.template_name}
                </option>
            ))}
    </Select>
</FormControl>