Estoy tratando de acceder a una variable de estado usando una cadena dentro de un componente funcional de React.
Por ejemplo, sé que en los componentes de clase puedo hacer lo siguiente para acceder al estado según la entrada:
class Form extends React.Component { constructor(props) { super(props); this.state = { inputOne: null }} handleBlur(e, name) { if (!this.state[name]) { this.setState({ [`${name}Missing`]: true, }); } else { this.setState({ [`${name}Missing`]: false, }); } render() { <input onBlur={(e) => this.handleBlur(e, "inputOne")}></input> } } Al usar this.state[name] dentro de la función handleBlur , puedo acceder dinámicamente al valor de estado de inputOne.
¿Cómo haría algo similar dentro de un componente funcional?
¡Gracias por tu tiempo!
La única forma de hacer esto en un componente funcional sería tener el mismo tipo de estructura de estado que en el componente de clase, es decir, para los valores de estado a los que desea acceder dinámicamente, colóquelos todos en un objeto (o una matriz) .
const [inputs, setInputs] = useState({ inputOne: null }) Y luego const someStr = 'inputOne' y las inputs[someString] le darán ese valor de estado. Para configurarlo:
setInputs({ ...inputs, [someStr]: newValue // or use whatever computed property name you want });Por lo general, se recomienda usar variables de estado separadas cuando se usan componentes funcionales, pero cuando tiene muchas variables de estado a las que desea acceder dinámicamente, usar un solo objeto o matriz puede tener más sentido.
Usted puede hacer eso:
import { useState } from 'react'; const Custom = () => { const [state, setState] = useState({ inputOne: "", }); const handleBlur = (e, name) => { if (!state[name]) { setState({ [`${name}Missing`]: true, }); } else { setState({ [`${name}Missing`]: false, }); } } return ( <input onBlur={(e) => handleBlur(e, "inputOne")}></input> ); };