onClick 在第一次单击 MaterialUI FormControl API TextField 时不起作用

Question

在我的 React 应用程序中，我使用的是 MaterialUI 表单控件 API 文本字段。 在 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>

function：

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

我根本找不到原因。 对此有什么帮助吗？

Answer 1

您应该在代码中使用onChange={this.GetTemplates}以使其正常工作。 根据material-ui>select的官方API文档，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>

Answer 2

在 Select 中尝试使用 onChange 而不是 onClick。

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