This is one thing I’ve never managed to get to work consistently. I’d love to see the right docs on this if they’re out there.
I have the following code component, and it includes a text input field. I want to be able to submit the contents of that text input field via a form in Plasmic Studio, but I can’t currently access the data when a user types in it. Plasmic is blind to it.
How do I expose this dynamic value?
import React, { useState, useEffect } from 'react';
const DescriptionListRow = ({ title, value, onChange }) => {
const [isEditing, setIsEditing] = useState(false);
const [inputValue, setInputValue] = useState(value);
useEffect(() => {
setInputValue(value);
}, [value]);
const handleInputChange = (e) => {
const newValue = e.target.value;
setInputValue(newValue);
if (onChange) {
onChange(newValue);
}
};
const handleUpdateClick = () => {
setIsEditing(true);
};
const handleSubmit = () => {
setIsEditing(false);
if (onChange) {
onChange(inputValue);
}
};
const handleCancel = () => {
setIsEditing(false);
setInputValue(value);
};
return (
<div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
<dt className="text-sm font-medium leading-6 text-gray-900">{title}</dt>
<dd className="mt-1 flex text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
<span className="flex-grow">
{isEditing ? (
<input
type="text"
value={inputValue}
onChange={handleInputChange}
className="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
/>
) : (
value
)}
</span>
<span className="ml-4 flex-shrink-0">
{isEditing ? (
<>
<button
type="button"
className="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500 mr-2"
onClick={handleSubmit}
>
Save
</button>
<button
type="button"
className="rounded-md bg-white font-medium text-gray-600 hover:text-gray-500"
onClick={handleCancel}
>
Cancel
</button>
</>
) : (
<button
type="button"
className="rounded-md bg-white font-medium text-indigo-600 hover:text-indigo-500"
onClick={handleUpdateClick}
>
Update
</button>
)}
</span>
</dd>
</div>
);
};
export default DescriptionListRow;