blocks|key|766235|text|下面是我如何为输入值设置状态的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766236|确保在组件外部(在定义组件之前)设置它。|766237|let+initialValues+=+{
++city:+''
}|code-block|syntax|javascript|766238|const+[quote,+setQuote]+=+useState(initialValues)|766239|<input+type="text"
++value={+quote.city+%7C%7C+""+}
++name="city"
++onChange={+onChange+}+/>|766240|const+onChange+=+(e)+=>+{
++setQuote({...quote,+[e.target.name]:+e.target.value});
};|766241|您可以在initialValues+const中拥有同样多的键值。请确保定义输入的名称以及指向状态对象的值以及处理该设置的onChange事件。编码愉快！|offset|length|style|CODE|766242|entityMap^0|0|0|0|0|0|0|4|D|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|12|8|@$Q|13|R|14|S|T]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>Here is an example of how I set state for input values.</p>
<p>Make sure to set this outside the component (before defining the component).</p>
<pre class="lang-js prettyprint-override"><code>let initialValues = {
  city: ''
}
</code></pre>
<pre class="lang-js prettyprint-override"><code>const [quote, setQuote] = useState(initialValues)
</code></pre>
<pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;text&quot;
  value={ quote.city || &quot;&quot; }
  name=&quot;city&quot;
  onChange={ onChange } /&gt;
</code></pre>
<pre class="lang-js prettyprint-override"><code>const onChange = (e) =&gt; {
  setQuote({...quote, [e.target.name]: e.target.value});
};
</code></pre>
<p>you can have as many key values inside the <code>initialValues</code> const. Make sure you define the name of the input along with the value pointing to the state object and an onChange event that handles the setting. Happy Coding!</p>


blocks|key|766268|text|要使用所拥有的代码进行简单更改，只需为输入元素重写onChange方法即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766269|onChange={(e)+=>+setName(e.target.value)}|code-block|syntax|javascript|766270|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|$]]

<p>To make a simple change with the code that you have, you can simply rewrite the onChange method for the input element.</p>
<pre><code>onChange={(e) =&gt; setName(e.target.value)}
</code></pre>


blocks|key|766321|text|简短解释：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766322|你做错的是onChange={setName()}。一定是onChange={(...)+=>+setName(...)}或onChange={setName}。|offset|length|style|CODE|766323|长篇解释：|766324|当您以onChange={setName()}的形式编写代码时，它将运行类似于下面2行代码的代码：|766325|const+tempValue+=+setName()+//+this+will+run+setName+with+no+parameter,+which+makes+name+=+undefined
++++++++++++++++++++++++++++//+then+save+return+data+to+tempValue+=+undefined
...onChange={tempValue}...++//+or+equal+onChange={undefined},+which+make+no+sense|code-block|syntax|javascript|766326|这里的onChange接受一个接受event+param的函数，所以您必须这样写它：|766327|function+eventHandler(event)+{...}
or
const+eventHandler+=+event+=>+...
...onChange={eventHandler}...|766328|更具体地说，在您的情况下，需要这样做：|766329|const+eventHandler+=+event+=>+setName(event.target.value)
...onChange={eventHandler}...
or
...onChange={event+=>+setName(event.target.value)}...|766330|entityMap^0|0|5|K|T|W|1Q|I|0|0|3|K|0|0|3|8|H|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]|$D|14|E|15|F|G]|$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1D|8|@$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|S|3|T|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Y|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|Z|$]]

<p>Short explain:</p>
<p>What you are doing wrong is <code>onChange={setName()}</code>. It must be <code>onChange={(...) =&gt; setName(...)}</code> or <code>onChange={setName}</code>.</p>
<p>Long explain:</p>
<p>When you write code as <code>onChange={setName()}</code>, it will running similar to 2 below lines of code:</p>
<pre><code>const tempValue = setName() // this will run setName with no parameter, which makes name = undefined
                            // then save return data to tempValue = undefined
...onChange={tempValue}...  // or equal onChange={undefined}, which make no sense
</code></pre>
<p>The <code>onChange</code> here accept a function which accept <code>event</code> param, so you must write it like this:</p>
<pre><code>function eventHandler(event) {...}
or
const eventHandler = event =&gt; ...
...onChange={eventHandler}...
</code></pre>
<p>More specific, in your case, it needs to be like this:</p>
<pre><code>const eventHandler = event =&gt; setName(event.target.value)
...onChange={eventHandler}...
or
...onChange={event =&gt; setName(event.target.value)}...

</code></pre>


blocks|key|766335|text|根据您提供的代码，您似乎没有将状态设置为任何关于更改的内容。一个好的做法是建立一个处理程序，这个处理程序将在输入的值被更改时触发--这将将相应的值设置为您的状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|766336|此外，由于您实际上是将其作为受控输入，因此我建议添加状态值作为其值属性。这样，您就可以通过状态直接处理它(例如，如果您想让它重置)。|766337|const+YourComponent+=+()+=>+{
+const+[name,setName]+=+useState("");
++++
+const+nameChangeHandler+=+(e)+=>+{
++++setName(e.target.value)
+};

+return+(
+<div+className="App">
++++<div+class="inputfield">
++++++<label>Campaign+Name</label>
++++++<input+type='text'+required+maxLength='20'+onChange={nameChangeHandler}+value={name}+className="input"/>
+++</div>+
+</div>++
};|code-block|syntax|javascript|766338|有关更多信息，您还可以检查正式文件。|offset|length|766339|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/forms.html^0|0|0|0|D|4|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|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Based on the code that you have provided, it seems that you are not setting your state to anything on change. A good practice would be to establish a handler, that will be triggered when the input's value has been changed - this will set the respective value to your state.</p>
<p>Additionally, since you are effectively making this a controlled input, I would recommend adding the state value as its value attribute. This way, you can handle it directly through the state (say if you wanted to have it reset).</p>
<pre class="lang-js prettyprint-override"><code>const YourComponent = () =&gt; {
 const [name,setName] = useState(&quot;&quot;);
    
 const nameChangeHandler = (e) =&gt; {
    setName(e.target.value)
 };

 return (
 &lt;div className=&quot;App&quot;&gt;
    &lt;div class=&quot;inputfield&quot;&gt;
      &lt;label&gt;Campaign Name&lt;/label&gt;
      &lt;input type='text' required maxLength='20' onChange={nameChangeHandler} value={name} className=&quot;input&quot;/&gt;
   &lt;/div&gt; 
 &lt;/div&gt;  
};
</code></pre>
<p>For more information, you can also check the <a href="https://reactjs.org/docs/forms.html" rel="nofollow noreferrer">official documentation</a>.</p>


<p>I have a form that I need to get the information from all the inputs and save it in state.</p>
<p>What am I doing wrong?</p>
<pre class="lang-js prettyprint-override"><code>const [name,setName] = useState(&quot;&quot;);

return (
  &lt;div className=&quot;App&quot;&gt;
    &lt;div class=&quot;inputfield&quot;&gt;
      &lt;label&gt;Campaign Name&lt;/label&gt;
      &lt;input type='text' required maxLength='20' onChange={setName()} className=&quot;input&quot;/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
)
</code></pre>


React saving inputs to state

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个表单，我需要从所有输入中获取信息并将其保存在状态中。我做错了什么？const [name,setName] = useState("");return (  <div className="App">    <div class="inputfield">      <label>Campaign Name</...

问将保存的输入响应到状态
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将保存的输入响应到状态EN