编辑:这是重复的,请参阅 here
在设置状态时,我找不到任何使用动态键名的示例。这就是我想要做的:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
其中 event.target.id 用作要更新的状态键。这在 React 中是不可能的吗?
感谢@Cory 的提示,我使用了这个:
inputChangeHandler : function (event) {
var stateObject = function() {
returnObj = {};
returnObj[this.target.id] = this.target.value;
return returnObj;
}.bind(event)();
this.setState( stateObject );
},
如果使用 ES6 或 Babel transpiler 转换您的 JSX 代码,您也可以使用 computed property names 完成此操作:
inputChangeHandler : function (event) {
this.setState({ [event.target.id]: event.target.value });
// alternatively using template strings for strings
// this.setState({ [`key${event.target.id}`]: event.target.value });
}
当需要处理多个受控输入元素时,可以给每个元素添加一个name属性,让handler函数根据event.target.name的值来选择要做什么。
例如:
inputChangeHandler(event) { this.setState({ [event.target.name]: event.target.value }); }
this.state([event.target.name])
?
我是如何做到这一点的...
inputChangeHandler: function(event) {
var key = event.target.id
var val = event.target.value
var obj = {}
obj[key] = val
this.setState(obj)
},
this.forceUpdate();
最新的 React 不应该是这种情况。以后看看是什么问题!!
我只是想补充一点,您还可以使用解构来重构代码并使其看起来更整洁。
inputChangeHandler: function ({ target: { id, value }) {
this.setState({ [id]: value });
},
我有一个类似的问题。
我想设置第二级密钥存储在变量中的状态。
例如this.setState({permissions[perm.code]: e.target.checked})
但是,这不是有效的语法。
我使用以下代码来实现这一点:
this.setState({
permissions: {
...this.state.permissions,
[perm.code]: e.target.checked
}
});
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
});
请注意引号字符。
[ ]
的作用吗?为什么 react 需要这个?
在 .map
的循环中工作如下:
{
dataForm.map(({ id, placeholder, type }) => {
return <Input
value={this.state.type}
onChangeText={(text) => this.setState({ [type]: text })}
placeholder={placeholder}
key={id} />
})
}
请注意 type
参数中的 []
。希望这可以帮助 :)
我一直在寻找一个漂亮而简单的解决方案,我发现了这个:
this.setState({ [`image${i}`]: image })
希望这可以帮助
使用 ES6+,您只需执行 [${variable}
]
当给定元素是对象时:
handleNewObj = e => {
const data = e[Object.keys(e)[0]];
this.setState({
anykeyofyourstate: {
...this.state.anykeyofyourstate,
[Object.keys(e)[0]]: data
}
});
};
希望它可以帮助某人
您的状态与字典更新一些键而不会丢失其他值
state =
{
name:"mjpatel"
parsedFilter:
{
page:2,
perPage:4,
totalPages: 50,
}
}
解决方案如下
let { parsedFilter } = this.state
this.setState({
parsedFilter: {
...this.state.parsedFilter,
page: 5
}
});
此处更新值为 5 的键“页面”的值
请试试这个。
状态在这里作为例子
this.state = {
name: '',
surname: '',
username: '',
email: '',
}
Onchange 功能在这里。
onChangeData = (type, event) => {
const stateData = this.state;
if (event === "" || event === "Seçiniz")
stateData[type] = undefined
else
stateData[type] = event
this.setState({ stateData});
}
可以使用扩展语法,如下所示:
inputChangeHandler : function (event) {
this.setState( {
...this.state,
[event.target.id]: event.target.value
} );
},
prevState
否则您将无法保证您使用的是最新状态。但是,如果您只是像@sta 的答案那样设置一个单一的顶级状态值,那么您不需要传播状态,因为 React 会为您合并它。 reactjs.org/docs/…
computed property names
trad
,这是我为避免<Radio />
实现的代码重复而寻找的。this.setState({ [event.target.id]: event.target.value });
,那么您将如何使用this.state......
访问该状态?