Tiếp theo như đề bài là ta có thể thêm input mỗi khi click button Add và remove input đó đi với button Remove, ta sửa lại 2 function ở trên nhé
...
const onAddClick = async () => {
//chèn thêm 1 object input mới mỗi khi click butotn `Add`
let newInput: InputType = {
id: inputs.length,
content: ""
};
setInputs([...inputs, newInput]);
};
//xóa input đó đi với vị trí index được click
const onRemoveClick = index => () => {
let newInputs = [...inputs];
newInputs.splice(index, 1);
setInputs(newInputs);
};
...
Vậy là đã gần xong rồi đó, nhưng bất chợt nhận ra là nếu khi ta có nhiều hơn 1 input thì khi muốn sửa text của input 1 và input 2 thì sao? với code hiện tại sẽ như thế nào? giá trị sẽ vào state inputs ra sao? Chắc chắn nếu hiện tại bạn chạy project nên và nhập input, state inputs field content của các input sẽ không có nội dung gì cả, vậy để fix lỗi này ta làm như sau:
thêm hàm onChange cho DynamicInput
...
<DynamicInput
key={input.id}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
//set lại value input mỗi khi thay đổi dựa theo index của input được chọn
//với index đã có trong state `inputs`
setInputs(
inputs.map((value, inputSelector) => {
if (index === inputSelector)
value.content = e.target.value;
return value;
})
)
}
onRemoveClick={onRemoveClick(index)}
/>
...
