带有动态键名的Reactjs setState() ?

编辑:这是一个副本，参见在这里

我找不到任何在设置状态时使用动态键名的例子。这就是我想做的:

inputChangeHandler : function (event) {
this.setState( { event.target.id  : event.target.value } );
},

其中event.target.id用作要更新的状态键。这在React中是不可能的吗?

231430 次浏览
小开

感谢@Cory的提示，我用了这个:

inputChangeHandler : function (event) {
var stateObject = function() {
returnObj = {};
returnObj[this.target.id] = this.target.value;
return returnObj;
}.bind(event)();


this.setState( stateObject );
},

如果使用ES6或巴别塔transpiler来转换你的JSX代码，你也可以用计算属性名来完成:

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 });
}
小开

我是怎么做到的…

inputChangeHandler: function(event) {
var key = event.target.id
var val = event.target.value
var obj  = {}
obj[key] = val
this.setState(obj)
},
小开

可以使用扩展语法，像这样:

inputChangeHandler : function (event) {
this.setState( {
...this.state,
[event.target.id]: event.target.value
} );
},
小开

当需要处理多个受控输入元素时，可以向每个元素添加一个name属性，并让处理程序函数根据event.target.name的值选择要做什么。

例如:

inputChangeHandler(event) {
this.setState({ [event.target.name]: event.target.value });
}

小开

使用.map的循环是这样工作的:

{
dataForm.map(({ id, placeholder, type }) => {
return <Input
value={this.state.type}
onChangeText={(text) => this.setState({ [type]: text })}
placeholder={placeholder}
key={id} />
})
}

注意type参数中的[]。 希望这有助于:)

小开

我只是想补充一点，你也可以使用解构来重构代码，让它看起来更整洁。

inputChangeHandler: function ({ target: { id, value }) {
this.setState({ [id]: value });
},
小开

在ES6+中，你只需要执行[${variable}]

小开

我也遇到过类似的问题。

我想设置第二级键在变量中存储的状态。

例如this.setState({permissions[perm.code]: e.target.checked})

然而，这不是有效的语法。

我使用以下代码来实现这一点:

this.setState({
permissions: {
...this.state.permissions,
[perm.code]: e.target.checked
}
});
小开

我一直在寻找一个漂亮而简单的解决方案，我发现了这个:

this.setState({ [`image${i}`]: image })

希望这能有所帮助

小开 
this.setState({ [`${event.target.id}`]: event.target.value}, () => {
console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
});

请注意引号。

小开

你的状态与字典更新一些键而不丢失其他值

state =
{
name:"mjpatel"
parsedFilter:
{
page:2,
perPage:4,
totalPages: 50,
}
}

解决方案如下

 let { parsedFilter } = this.state
this.setState({
parsedFilter: {
...this.state.parsedFilter,
page: 5
}
});

这里更新键“page”的值为5

小开

当给定元素为对象时:

handleNewObj = e => {
const data = e[Object.keys(e)[0]];
this.setState({
anykeyofyourstate: {
...this.state.anykeyofyourstate,
[Object.keys(e)[0]]: data
}
});
};

希望它能帮助到别人

小开

请试试这个。

这里以国家为例

 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});
}

提交答案