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

debugcn 发表于 Dev

普罗蒂蒂·普罗瓦（Proteeti Prova）

在我的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>

功能：

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

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

开发者爱玛

您应该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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。