blocks|key|4522397|text|感谢@Cory的提示，我使用了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522398|inputChangeHandler+:+function+(event)+{
++++var+stateObject+=+function()+{
++++++returnObj+=+{};
++++++returnObj[this.target.id]+=+this.target.value;
+++++++++return+returnObj;
++++}.bind(event)();

++++this.setState(+stateObject+);++++
},|code-block|syntax|javascript|4522399|如果使用ES6或Babel+transpiler来转换您的JSX代码，您也可以使用computed+property+names完成此操作：|offset|length|4522400|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+});
}|4522401|entityMap|0|LINK|mutability|MUTABLE|url|https://babeljs.io/|1|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names^0|0|0|8|G|0|15|N|1|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]|$I|12|J|13|1|14]]|A|$]]|$1|K|3|L|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

Thanks to @Cory's hint, i used this:

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

 this.setState( stateObject ); 
},
</code></pre>

If using ES6 or the <a href="https://babeljs.io/" rel="noreferrer">Babel transpiler</a> to transform your JSX code, you can accomplish this with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names" rel="noreferrer">computed property names</a>, too:

<pre><code>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 });
}
</code></pre>

blocks|key|14890|text|当您需要处理多个受控输入元素时，可以为每个元素添加一个名称属性，并让处理程序函数根据event.target.name的值选择要执行的操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|14891|例如：|14892|​|14893|inputChangeHandler(event)+{
++this.setState({+[event.target.name]:+event.target.value+});
}|code-block|syntax|javascript|14894|14895|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

When you need to handle multiple controlled input elements, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name.

For example:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>inputChangeHandler(event) {
 this.setState({ [event.target.name]: event.target.value });
}</code></pre>
</div>
</div>

blocks|key|4522424|text|我是如何做到这一点的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522425|inputChangeHandler:+function(event)+{
++var+key+=+event.target.id
++var+val+=+event.target.value
++var+obj++=+{}
++obj[key]+=+val
++this.setState(obj)
},|code-block|syntax|javascript|4522426|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

How I accomplished this...

<pre><code>inputChangeHandler: function(event) {
 var key = event.target.id
 var val = event.target.value
 var obj = {}
 obj[key] = val
 this.setState(obj)
},
</code></pre>

blocks|key|4522565|text|我只想补充一点，你也可以使用解构来重构代码，让它看起来更整洁。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522566|inputChangeHandler:+function+({+target:+{+id,+value+})+{
++++this.setState({+[id]:+value+});
},|code-block|syntax|javascript|4522567|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I just wanted to add, that you can also use de-structuring to refactor the code and make it look neater.

<pre><code>inputChangeHandler: function ({ target: { id, value }) {
 this.setState({ [id]: value });
},
</code></pre>

blocks|key|4522646|text|我也遇到过类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522647|我想设置二级密钥存储在变量中的状态。|4522648|例如this.setState({permissions[perm.code]:+e.target.checked})|offset|length|style|CODE|4522649|然而，这不是有效的语法。|4522650|我使用以下代码来实现这一点：|4522651|this.setState({
++permissions:+{
++++...this.state.permissions,
++++[perm.code]:+e.target.checked
++}
});|code-block|syntax|javascript|4522652|entityMap^0|0|0|2|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|11|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I had a similar problem.

I wanted to set the state of where the 2nd level key was stored in a variable.

e.g. <code>this.setState({permissions[perm.code]: e.target.checked})</code>

However this isn't valid syntax.

I used the following code to achieve this:

<pre><code>this.setState({
 permissions: {
 ...this.state.permissions,
 [perm.code]: e.target.checked
 }
});
</code></pre>

blocks|key|14947|text|In循环中.map的工作原理如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|14948|{
++++dataForm.map(({+id,+placeholder,+type+})+=>+{
++++++++return+<Input
++++++++++++value={this.state.type}
++++++++++++onChangeText={(text)+=>+this.setState({+[type]:+text+})}
++++++++++++placeholder={placeholder}
++++++++++++key={id}+/>
++++})
}|code-block|syntax|javascript|14949|请注意type中的[]参数。希望这能有所帮助:)|14950|entityMap^0|5|4|0|0|3|4|9|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

In loop with <code>.map</code> work like this:

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

Note the <code>[]</code> in <code>type</code> parameter.
Hope this helps :)

blocks|key|4522743|text|this.setState({+[`${event.target.id}`]:+event.target.value},+()+=>+{
++++++console.log("State+updated:+",+JSON.stringify(this.state[event.target.id]));
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4522744|请注意引号字符。|unstyled|4522745|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>this.setState({ [`${event.target.id}`]: event.target.value}, () =&gt; {
 console.log("State updated: ", JSON.stringify(this.state[event.target.id]));
 });
</code></pre>

Please mind the quote character.

blocks|key|15116|text|我在寻找一个非常简单的解决方案，我找到了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|15117|this.setState({+[`image${i}`]:+image+})|code-block|syntax|javascript|15118|希望这能有所帮助|15119|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I was looking for a pretty and simple solution and I found this: 

<pre><code>this.setState({ [`image${i}`]: image })
</code></pre>

Hope this helps

blocks|key|4522625|text|使用ES6%2B，您可以只执行${variable}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4522626|entityMap^0|D|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

With ES6+ you can just do [<code>${variable}</code>]

blocks|key|4522817|text|当给定的元素是对象时：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522818|handleNewObj+=+e+=>+{
++++++++const+data+=+e[Object.keys(e)[0]];
++++++++this.setState({
++++++++++++anykeyofyourstate:+{
++++++++++++++++...this.state.anykeyofyourstate,
++++++++++++++++[Object.keys(e)[0]]:+data
++++++++++++}
++++++++});
++++};|code-block|syntax|javascript|4522819|希望这能帮助到某个人|4522820|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

when the given element is a object:
<pre><code>handleNewObj = e =&gt; {
 const data = e[Object.keys(e)[0]];
 this.setState({
 anykeyofyourstate: {
 ...this.state.anykeyofyourstate,
 [Object.keys(e)[0]]: data
 }
 });
 };
</code></pre>
hope it helps someone

blocks|key|4522773|text|使用字典更新状态时不会丢失其他值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522774|state+=+
{+++
++++name:"mjpatel"++
++++parsedFilter:
++++{
++++++page:2,
++++++perPage:4,
++++++totalPages:+50,
++++}
}|code-block|syntax|javascript|4522775|解决方案如下|4522776|+let+{+parsedFilter+}+=+this.state
+this.setState({
++++++parsedFilter:+{
++++++++...this.state.parsedFilter,
++++++++page:+5
++++++}
++});|4522777|此处使用值5更新键"page“的值|4522778|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Your state with dictionary update some key without losing other value 

<pre><code>state = 
{ 
 name:"mjpatel" 
 parsedFilter:
 {
 page:2,
 perPage:4,
 totalPages: 50,
 }
}
</code></pre>

Solution is below 

<pre><code> let { parsedFilter } = this.state
 this.setState({
 parsedFilter: {
 ...this.state.parsedFilter,
 page: 5
 }
 });
</code></pre>

here update value for key "page" with value 5

blocks|key|4522461|text|可以使用扩展语法，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4522462|inputChangeHandler+:+function+(event)+{
++++this.setState(+{+
++++++++...this.state,
++++++++[event.target.id]:+event.target.value
++++}+);
},|code-block|syntax|javascript|4522463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Can use a spread syntax, something like this:

<pre><code>inputChangeHandler : function (event) {
 this.setState( { 
 ...this.state,
 [event.target.id]: event.target.value
 } );
},
</code></pre>

EDIT: this is a duplicate, see <a href="https://stackoverflow.com/questions/2462800/how-to-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable">here</a>

I can't find any examples of using a dynamic key name when setting the state. This is what I want to do:

<pre><code>inputChangeHandler : function (event) {
 this.setState( { event.target.id : event.target.value } );
},
</code></pre>

where event.target.id is used as the state key to be updated. Is this not possible in React?

Reactjs setState() with a dynamic key name?

编辑:这是一个副本，请参阅在设置状态时，我找不到任何使用动态密钥名称的示例。这就是我想要做的：inputChangeHandler : function (event) {    this.setState( { event.target.id  : event.target.value } );},其中event.target.id被用作要更新的状态密钥。这在React中是不可能的吗？

问使用动态密钥名称的Reactjs setState()？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动态密钥名称的Reactjs setState()？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动态密钥名称的Reactjs setState()？
EN