处理动态创建的事件 <select>下拉选项

Question

Let's say I have a function which returns a dropdown. This function gets called from some parent, where the parent passes in props including a state key, array, and onChange. The dropdown is created dynamically from the items in the array. What I want to happen is, when an option in the dropdown is selected, the parents passed in state key gets updated to the value of whatever was selected. Currently, I am trying to do this by setting an onClick handler per , which doesn't work. Instead, I am met with either no or undefined values (described more below).

Example flow:

• Parent passes in aStateKey (actual state key), an array to be used as dropdown values, and an onChange function to be used to update aStateKey
• The dropdown menu is created from the passed inarray
• A dropdown item is selected
• aStateKey (which was passed in as a prop) gets updated via the passed in onChange function.

I understand that the traditional method is to give and onChange handler, but I am having troubles working out how to get the desired described above.

Parent

state = { aStateKey: "" };

someArray = ["test", "another test"];

updateField = (name, value) => {
        console.log("Updating field: " + name + " with value: " + value);

}

return(
    <div>
        <CreateDropdown name="aStateKey" items={this.someArray} onChange={this.updateField} />
    </div>
);

CreateDropdown

function CreateDropdown(props) {
    const handleClick = event => {
        console.log("changed name:" + event.name + "changed value: " + event.value);
        props.onChange(event.name, event.value);
    };

    return (
        <div>
            <select>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name} onClick={handleClick}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );
}

Console log

Shows nothing! However, if I move the onClick from <option> to <select> , ie

return (
        <div>
            <select onChange={handleClick}>
                {props.items.map(field => (
                    <option key={field} value={field} name={props.name}>
                        {field}
                    </option>
                ))}
            </select>
        </div>
    );

The console shows:

Updating field: undefined with value: undefined.

changed name:undefinedchanged value: undefined

How can I achieve my desired behavior?

Answer 1

your target form this event is select and use onChange and here the updated function you need:

function CreateDropdown(props) {

  return (
     <div>
        <select name={props.name} onChange={e => 
          props.onChange(e.target.name, e.target.value);}>
            {props.items.map(field => (
                <option key={field} value={field} 
                    {field}
                </option>
            ))}
        </select>
     </div>
   );
} 

Answer 2

UPDATE #1

Inside handleClick , you are using event.name and event.value to get the target values you want.

instead use event.target.name and event.target.value

---

Try using onChange instead of onClick in your select element.

It belongs to select not option elements.