내 양식에 대한 입력 필드를 생성하기 위해 내 반응 앱에서 다음 스 니펫이 있습니다.
const [profiles, setProfiles] = useState({
controls: [
{
network: {
elementType: "input",
elementConfig: {
type: "text",
label: "Network",
},
value: "Twitter",
},
},
{
username: {
elementType: "input",
elementConfig: {
type: "text",
label: "Username",
},
value: "@john",
},
},
{
url: {
elementType: "input",
elementConfig: {
type: "url",
label: "URL",
},
value: "https://example.co",
},
},
],
});입력 필드를 생성하는 코드 스 니펫 :
const profilesControls = (controls) => {
const formElementsArray = controls.map((item,index) =>({
id: Object.keys(item)[0],
index:index,
config: item[Object.keys(item)[0]],
}))
return formElementsArray;
}
let profileField = profilesControls.map((formElement) => (
<Input
label={formElement.config.elementConfig.label}
key={formElement.index}
type={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value}
changed={(event) =>
arrayInputHandler(event, formElement.index, formElement.id)
}
/>
));그리고 버튼에 추가 된 버튼과 기능은 [네트워크, 사용자 이름, URL] 의 다른 세트를 추가합니다 .
const handelAddField = () => {
const fields = [...profiles.controls];
fields.map((item, i) => {
setProfiles({...profiles, controls: [...profiles.controls, item]})
});
console.log(profiles.controls);
};으로 handelAddField I 개체 상태의 제어 배열에 가압되지만, 입력 필드 형태로 생성되지 볼 수있다.
최신 정보
이제 URL 인 하나의 입력 필드 만 생성됩니다.
내 자신의 솔루션을 찾았습니다.
const handelAddField = () => {
const fields = [...profiles.controls];
fields.map((item, i) => {
fields.push(item);
});
setProfiles((prev) => ({
...prev,
controls:fields
}));
};이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다