如何使用函数组件中的字符串访问状态变量？
如何使用函数组件中的字符串访问状态变量？
提问于 2021-10-13 17:59:06
我试图使用React函数组件中的字符串访问状态变量。
例如，我知道在Class组件中，我可以根据输入来访问状态：
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>
}
}通过在this.state[name]函数中使用handleBlur，我可以动态地访问inputOne状态值。
我将如何在功能组件中执行类似的操作？
耽误您时间，实在对不起!
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-10-13 18:04:05
你可以这样做：
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>
);
};Stack Overflow用户
发布于 2021-10-13 18:03:14
在functional中执行此操作的唯一方法是具有与类组件相同的状态结构--也就是说，对于要动态访问的状态值，将它们全部放入一个对象(或数组)中。
const [inputs, setInputs] = useState({
inputOne: null
})然后const someStr = 'inputOne'和inputs[someString]会给出状态值。要设置它：
setInputs({
...inputs,
[someStr]: newValue
// or use whatever computed property name you want
});在使用功能组件时，通常建议使用单独的状态变量--但是当您有大量要动态访问的状态变量时，使用单个对象或数组可能更有意义。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69560231
复制相关文章
相似问题
腾讯云开发者
