反应.js |非受控与受控输入

在 HTML 中，、、<select> 等表单元素通常会维护自己的状态并根据用户输入进行更新。在 React 中，可变（可变）状态通常保存在组件的 state 属性中。<br>在 React 表单中，输入值可以根据您的选择分为两种类型：非受控值和受控值。<br><strong>不受控制的输入：</strong>对于不受控制的输入值，任何状态都不会更新或更改。它维护自己的内部状态，这基本上意味着它会记住您在该字段中键入的内容。该值可以通过在需要使用时使用 ref 关键字拉取来利用。在不受控制的输入中，您提交的值就是您获得的值。<br></p><p>现在，打开你的 react 项目并编辑 src 文件夹中的<strong>index.js</strong>文件：</p><p><strong>源索引.js：</strong></p><div><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">import React from 'react'; import ReactDOM from 'react-dom'; import NameForm from './NameForm'; ReactDOM.render( <React.StrictMode> <NameForm /> </React.StrictMode>, document.getElementById('root') );</code></pre></div><br><hr><h5 class="code">javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">import React,{Component} from 'react'; class NameForm extends React.Component { handleClick = () => { const name = this._name.value; alert('Hello ', name); } render() { return ( <div> <input type="text" ref= {inputValue => this._name = inputValue} placeholder="Enter your name" /> <button onClick={this.handleClick}> Done </button> </div> ); } } export default NameForm;</code></pre></div><br><hr><h5 class="code">javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">import React,{Component} from 'react'; class NameForm extends React.Component { constructor(props) { super(props); this.state = { name: '', }; } handleNameChange = (event) => { this.setState({ name: event.target.value }); }; render() { return ( <div> <input type="text" onChange= {this.handleNameChange} placeholder="Enter your name" /> <h1>{this.state.name}</h1> </div> ); } } export default NameForm;</code></pre></div><br><hr></div><p>在 react 项目中创建一个组件名称 NameForm.js：</p><p>现在，打开您的 react 项目并编辑 src 文件夹中的<strong>NameForm.js</strong>文件：</p><p> <strong>src NameForm.js：</strong><br></p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">import React,{Component} from 'react'; class NameForm extends React.Component { handleClick = () => { const name = this._name.value; alert('Hello ', name); } render() { return ( <div> <input type="text" ref= {inputValue => this._name = inputValue} placeholder="Enter your name" /> <button onClick={this.handleClick}> Done </button> </div> ); } } export default NameForm; </code></pre></div></div></div></div><p><strong>输入：</strong>塔尼莎<br><strong>输出：</strong> Hello Tanisha（显示在警报框上） <br></p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/React.js_%7C_Uncontrolled_Vs_Controlled_Inputs_0.png" alt></p><p><strong>受控输入：</strong>在受控输入中，字段中始终存在某种变化和修正，输入的每个字符甚至退格键之类的内容都将被视为更改。输入字段的当前值将是类组件的一个属性（通常它将处于使用 this.state.varName 引用的状态。）因为它们不维护其内部状态。还有一个回调函数（如 onChange、onClick 等）是处理输入字段中发生的更改（值）所必需的，这使得它们可以控制。<br>现在，打开您的 react 项目并编辑 src 文件夹中的<strong>NameForm.js</strong>文件：<br> src <strong>NameForm.js：</strong></p><div class="noIdeBtnDiv"><div class="responsive-tabs"><h2 class="tabtitle"> javascript </h2><div class="tabcontent"><div class="hcb_wrap"><pre class="prism undefined-numbers lang-java" data-lang="java"><code class="replace">import React,{Component} from 'react'; class NameForm extends React.Component { constructor(props) { super(props); this.state = { name: '', }; } handleNameChange = (event) => { this.setState({ name: event.target.value }); }; render() { return ( <div> <input type="text" onChange= {this.handleNameChange} placeholder="Enter your name" /> <h1>{this.state.name}</h1> </div> ); } } export default NameForm; </code></pre></div></div></div></div><p><strong>输入：</strong>塔尼莎<br><strong>输出：</strong> Tanisha（在用户键入时逐个字母显示在屏幕上） <br></p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/React.js_%7C_Uncontrolled_Vs_Controlled_Inputs_1.png" alt></p><p><strong>哪一个更好？</strong><br>很明显，受控和不受控的表单域各有各的好处。您可能需要同时使用两者或其中一个，具体取决于具体情况。如果您正在制作一个简单的表单，几乎没有 UI 反馈并且不需要即时验证（这意味着您只会在提交时验证和/或需要值），那么您应该使用带有 refs 的不受控制的输入。它将在 DOM 中保留真实的来源，使其更快并需要更少的代码。如果您需要更多 UI 反馈并考虑到特定输入字段中的每一个微小变化，请选择受控输入。<br></p><br></div></article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>