下拉组件选元素后显示输入字段失败，遇addEventListener报错求助

Hey there! Let's break down your problem step by step and fix it:

1. Why you're seeing "Cannot read property 'addEventListener' of null" #

This error pops up for two common reasons with UI framework components (yours looks like ExtJS or a similar framework):

• You're trying to attach a native event listener before the component's DOM has finished rendering to the page.
• Framework components wrap their DOM elements, so you can't grab them with standard methods like getElementById directly—you need to use the framework's own API to access the component's DOM.

2. Fix the issue using your component's built-in listeners #

Great news: you already started using the framework's native listeners config for the select event! This is the right approach for framework components (way more reliable than native addEventListener). You just need to expand that function to handle showing your input field.

Here's how to update your component's config:

{
  PlaceHSolder: "",
  Fields:[{
    Name:"The color of the car",
    Label: 'The color of the car',
    Type:'Lookup',
    Fields: ['id', 'color'],
    FieldValues:[
      {"id":"1", "color":"red", id: '1red'},
      {"id":"2", "color":"blue", id: '2blue'},
      {"id":"3", "color":"green", id: '3green'}
    ],
    LabelField: 'color',
    ValueField: 'id',
    IsSingle: true,
    triggerAction: 'all',
    queryParam: 'q',
    queryMode: 'remote',
    listeners: {
      select: function (combo, selectedRecords) {
        // Get the selected color's data
        const selectedItem = selectedRecords[0]; // Since IsSingle is true, we take the first record
        const selectedColor = selectedItem.get('color');
        const selectedId = selectedItem.get('id');
        
        // Now show/hide your input field (adjust the selector to match your input's actual ID/class)
        const targetInput = document.getElementById('your-input-field-id');
        
        if (targetInput) {
          // Show the input only when "blue" is selected (id: 2)
          if (selectedId === "2") {
            targetInput.style.display = 'block';
            // Optional: Pre-fill the input with the selected color
            targetInput.value = selectedColor;
          } else {
            targetInput.style.display = 'none';
          }
        }
      }
    },
    renderTo: document.body
  }],
  Required: false
}

3. Quick tips for beginners working with UI frameworks #

• Always use the framework's built-in events/API first: Frameworks like ExtJS manage component lifecycles and DOM changes under the hood—direct native DOM operations can break their functionality.
• Double-check that your input field exists in the DOM with the correct ID/class before trying to manipulate it. If it's also a framework component, use its API to toggle visibility instead of style.display.

内容的提问来源于stack exchange，提问作者EngelaH