import React from "react";
import { useState } from "react";
import Select from "react-select";
const EditMitarbeiter = () => {
const optionsField1 = [
{ id: "1", value: "test1", label: "Test1"},
{ id: "2", value: "test2", label: "Test2"},
{ id: "3", value: "test3", label: "Test3"},
{ id: "4", value: "test4", label: "Test4"},
];
const[functions, setFunctions] = useState([
{field1:"test1",field2:"test2",field3:"test3",input:"Test"}
]);
const handleFunctionAdd = () => {
setFunctions([...functions, {field1:"",field2:"",field3:"",input:""}]);
};
const handleFunctionRemove = (event, index) => {
event.preventDefault(); // verhindert Default Verhalten von Button, ist somit kein "Submit-Button" mehr und l?dt Seite nicht neu
console.log(index); // FEHLER: este Funktion wird nicht entfernt, sondern folgende
const list = [...functions];
list.splice(index,1);
setFunctions(list);
};
const handleFunction1Change = (event, index) => {
const newFunctions = [...functions];
newFunctions[index].field1 = event.value;
setFunctions(newFunctions);
}
return (
<div>
<div id="content">
<form id="Funktion">
<legend>Funktionen</legend>
{functions.map((f,index) => (
<div key={index} id="function-box">
<div class="ReactSelect"><Select options={optionsField1} defaultValue={f.field1} onChange={(event) => handleFunction1Change(event,index)}/></div>
</div>
))}
</form>
</div>
</div>
);
}
export default EditMitarbeiter;
我遇到的問題是我的 ReactSelect 的標簽沒有改變并且它保持空白。我已經查看了一些類似的問題，但我無法弄清楚為什么我的示例不起作用，即使我使用了其他問題的解決方案。
還有一個附帶問題，是否值得在普通的 HTMLSelect 上使用 ReactSelect，因為我只是遇到了 ReactSelect 的問題......
uj5u.com熱心網友回復：
f.field1 = "test1" 默認值
defaultValue="test1"
但默認值必須是這樣的
defaultValue={{label:"xyz",value:"xyz"}}
福佑，這行得通
defaultValue={optionsField1.find((d) => d.value === f.field1)}
uj5u.com熱心網友回復：
我已經在代碼沙箱中運行了你的代碼。我認為選擇任何選項都沒有問題。這是鏈接：https ://codesandbox.io/s/react-app-c08zs4?file=/src/App.js
如果您還有其他意思，請告訴我。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482161.html
標籤：javascript html 反应
上一篇：根據特定的默認列對表進行排序