處理動態創建的事件 <select>下拉選項

Question

假設我有一個返回下拉菜單的函數。 該函數從某個父對象調用，該父對象在其中傳遞道具，包括狀態鍵，數組和onChange。 下拉列表是根據數組中的項目動態創建的。 我想發生的是，當選擇下拉菜單中的一個選項時，傳遞給狀態鍵的父項將更新為所選值。 目前，我正在嘗試通過設置一個onClick處理程序來實現此目的，該方法不起作用。 取而代之的是，我遇到了沒有值或未定義的值（下面將詳細介紹）。

流程示例：

• 父級傳入aStateKey（實際狀態密鑰），用作下拉值的數組以及用於更新aStateKey的onChange函數
• 下拉菜單是從傳遞的數組中創建的
• 選擇了一個下拉項
• aStateKey（作為道具傳入）通過傳入的onChange函數進行更新。

我知道傳統的方法是給定和onChange處理程序，但是我在解決如何獲得上述期望時遇到了麻煩。

父級

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>
    );
}

控制台日志

什么也沒顯示！ 但是，如果我將onClick從<option>移到<select> ，即

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

控制台顯示：

更新字段：未定義，值：未定義。

更改名稱：未定義更改值：未定義

我怎樣才能達到我期望的行為？

Answer 1

您的目標表單是選擇此事件並使用onChange，這里需要使用更新的功能：

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

更新1

在handleClick內部，您正在使用event.name和event.value獲取所需的目標值。

而是使用event.target.name和event.target.value

---

嘗試在select元素中使用onChange而不是onClick 。

它屬於select而非option元素。