Estoy tratando de eliminar una propiedad de objeto usando la sintaxis extendida que representa un componente React. Me pregunto si hay una manera de lograrlo sin agregar mucho código adicional. Estoy usando {restablecer,... nombre de entrada}
Tengo un enlace personalizado (useField) para cada entrada en mi formulario. useField también tiene una función de reinicio para mi botón de reinicio. Pero quiero eliminar la propiedad de reinicio solo para el elemento de entrada.
useField gancho personalizado
export const useField = (type) => { const [value, setValue] = useState('') const onChange = (event) => { setValue(event.target.value) } const reset = () => { setValue('') } return { type, value, onChange, reset } }formulario de reacción
const MyForm = (props) => { const content = useField('text') const author = useField('text') const info = useField('text') const handleClick = () => { content.reset() author.reset() info.reset() } return ( <div> <h2>create a new anecdote</h2> <form onSubmit={handleSubmit}> <div> content <input {reset,...content} /> </div> <div> author <input {reset,...author} /> </div> <div> url for more info <input {reset,...info} /> </div> <button>create</button> <input type="reset" value='reset' onClick={handleClick} /> </form> </div> ) }Para referencia futura, lo que puede funcionar para OP son cambios similares a los siguientes:
const { reset: resetContent, ...content} = useField('text') const { reset: resetAuthor, ...author} = useField('text') const { rest: resetInfo, ...info} = useField('text') const handleClick = () => { resetContent(); resetAuthor(); resetInfo(); }; . . . <div> content <input {...content} /> </div> . . .Explicación
useField está desestructuradoreset se separa y se renombra como resetContent (o resetAuthor , resetInfo , según sea necesario)content (o author , variables de info , según sea necesario)content Por lo tanto, efectivamente, el accesorio de reset de useField se 'removed' (aunque técnicamente, solo se separó) en el nuevo objeto de content .