带有值的 React textarea 是只读的，但需要更新 [英] React textarea with value is readonly but need to be updated

查看：77 发布时间：2021/7/5 20:29:38 javascript reactjs textarea redux
本文介绍了带有值的 React textarea 是只读的，但需要更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

我的 React 应用中有一个 textarea 填充了一个值.我希望更新此 textarea 并提交表单以更新数据库中的行.
</pre><p>描述变量用数据库中的值填充文本区域.该字段未禁用.</p><p>我尝试附加一个 onChange 事件，该事件调度一个动作 (redux) 来更改 textarea 的值，但它为每个字母触发，而且速度太慢.</p><p>如何创建一个由值填充且可编辑的文本区域?</p><p>谢谢！</p><div class="h2_lin"> 解决方案 </div><p>这是一个带有两个文本区域的组件.props 和 state 之间存在受控关系.这是输入的关键.注意 componentWillReceiveProps.</p><pre><code> import React, {Component} from 'react';从'../../flux/Actions'导入动作；让 CurrentSnipDivSty = {高度:'calc(((100% - 40px) * .4) - 3px)',最小高度:'9.5em'，宽度:'100%'};让 CurrentSnipTextAreaSty = {背景颜色:'#213919'，边框:'1px 实心 #314929',颜色:'#afac87'，字体大小:'1em'，高度:'计算(50％ - 20px)'，溢出:'自动'，填充:'5px'，宽度:'计算(100% - 12px)'};类 SnipsDetailRender 扩展组件 {使成为() {让 snip = this.state.snip.snip;让评论 = this.state.snip.comment;返回 (<div id='CurrentSnipDivSty' style={CurrentSnipDivSty}><文本区域值={snip}onChange={this.handleSnipChange}style={CurrentSnipTextAreaSty}/><文本区域价值={评论}onChange={this.handleCommentChange}style={CurrentSnipTextAreaSty}/></div><p>);}}导出默认类 SnipsDetail 扩展 SnipsDetailRender {构造函数(){极好的();this.state = { snip: {snip: '', comment: ''} };}componentWillReceiveProps = (nextProps) =>{if ((nextProps.data.snip != this.state.snip.snip) || (nextProps.data.comment != this.state.snip.comment))this.setState({snip: nextProps.data});}handleSnipChange = (ev) =>{让 newSnip = {snip: ev.target.value, comment: this.state.snip.comment};this.setState({snip: newSnip});Actions.saveSnipEdit(newSnip);}handleCommentChange = (ev) =>{让 newSnip = {snip: this.state.snip.snip, comment: ev.target.value};this.setState({snip: newSnip});Actions.saveSnipEdit(newSnip);}}</code></pre><p><p>I have a textarea in my React app who is filled with a value. I want this textarea to be updated and the form submited to update the row in the database. </p><pre><code><textarea id="description" className="materialize-textarea" length="120" value={description} disabled={isDisabled}></textarea>
</code></pre><p>The description variable fill the textarea with the value from the database. The field is not disabled. </p>

<p>I tried to attach an onChange event who dispatch an action (redux) to change the value of the textarea, but it trigger for each letter and it's too slow.</p>

<p>How can i create a textarea who is filled by a value and is editable?</p>

<p>Thank you!</p><div class="h2_lin"> 解决方案 </div><p>Here is a component with two textareas. There is a controlled relation between props and state. That is the key for inputs. Note componentWillReceiveProps.</p><pre><code>    import React, {Component} from 'react';

    import Actions from '../../flux/Actions';

    let CurrentSnipDivSty = {
        height: 'calc(((100% - 40px) * .4) - 3px)',
        minHeight: '9.5em',
        width: '100%'
    };

    let CurrentSnipTextAreaSty = {
        backgroundColor: '#213919',
        border: '1px solid #314929',
        color: '#afac87',
        fontSize: '1em',
        height: 'calc(50% - 20px)',
        overflowY: 'auto',
        padding: '5px',
        width: 'calc(100% - 12px)'
    };

    class SnipsDetailRender extends Component {
        render() {
            let snip = this.state.snip.snip;
            let comment = this.state.snip.comment;

            return (
                <div id='CurrentSnipDivSty' style={CurrentSnipDivSty}>
                    <textarea
                        value={snip}
                        onChange={this.handleSnipChange}
                        style={CurrentSnipTextAreaSty} />
                    <textarea
                        value={comment}
                        onChange={this.handleCommentChange}
                        style={CurrentSnipTextAreaSty} />
                </div>
            );
        }
    }

    export default class SnipsDetail extends SnipsDetailRender {
        constructor() {
          super();
            this.state = { snip: {snip: '', comment: ''} };
        }
        componentWillReceiveProps = (nextProps) => {
            if ((nextProps.data.snip != this.state.snip.snip) || (nextProps.data.comment != this.state.snip.comment))
             this.setState({snip: nextProps.data});
        }
        handleSnipChange = (ev) => {
            let newSnip = {snip: ev.target.value, comment: this.state.snip.comment};
            this.setState({snip: newSnip});
            Actions.saveSnipEdit(newSnip);
        }
        handleCommentChange = (ev) => {
            let newSnip = {snip: this.state.snip.snip, comment: ev.target.value};
            this.setState({snip: newSnip});
            Actions.saveSnipEdit(newSnip);
        }
    }
</code></pre><p>

                        <p>这篇关于带有值的 React textarea 是只读的，但需要更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2370953');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="更新textarea值，但保持光标位置" href="/861646.html">
                            更新textarea值，但保持光标位置;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React 修改 Textarea 值" href="/2365454.html">
                            React 修改 Textarea 值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="无法获取更新的textarea值" href="/1899157.html">
                            无法获取更新的textarea值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React-redux 存储更新但 React 没有" href="/2699176.html">
                            React-redux 存储更新但 React 没有;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何禁用ENTER键时，asp.net textarea的是只读模式" href="/263430.html">
                            如何禁用ENTER键时，asp.net textarea的是只读模式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="ADT需要更新，但找不到更新" href="/663117.html">
                            ADT需要更新，但找不到更新;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="ADT需要更新，但发现没有更新" href="/112990.html">
                            ADT需要更新，但发现没有更新;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用jQuery将textarea变为只读" href="/1483066.html">
                            使用jQuery将textarea变为只读;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="只读（但投掷的）组合框" href="/15795.html">
                            只读（但投掷的）组合框;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什至需要`htmlspecialchars()`作为textarea的值吗" href="/2506118.html">
                            我什至需要`htmlspecialchars()`作为textarea的值吗;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="表是“只读"的" href="/2589704.html">
                            表是“只读"的;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="表是“只读的"" href="/1659088.html">
                            表是“只读的";
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React-redux存储更新，但React不存在" href="/1009596.html">
                            React-redux存储更新，但React不存在;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="无法更新数据库.MDF是只读" href="/598926.html">
                            无法更新数据库.MDF是只读;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 Angular JS 中的 CKEditor 内容更新 textarea 值" href="/2524787.html">
                            使用 Angular JS 中的 CKEditor 内容更新 textarea 值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用 Angular JS 中的 CKEditor 内容更新 textarea 值" href="/2523246.html">
                            使用 Angular JS 中的 CKEditor 内容更新 textarea 值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="“$attrs 是只读的"，“$listeners 是只读的"，“避免直接改变 prop"" href="/2722469.html">
                            “$attrs 是只读的"，“$listeners 是只读的"，“避免直接改变 prop";
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="[Vue 警告]:$attrs 是只读的.[Vue 警告]:$listeners 是只读的" href="/2474749.html">
                            [Vue 警告]:$attrs 是只读的.[Vue 警告]:$listeners 是只读的;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="useState 更新 React 中的多个值" href="/2363686.html">
                            useState 更新 React 中的多个值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="需要更新的SQLite列的值" href="/108649.html">
                            需要更新的SQLite列的值;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="角文摘周期是运行，但NG绑定值不更新" href="/198161.html">
                            角文摘周期是运行，但NG绑定值不更新;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="javascript - 提问：获取textarea的值，为什么是空的？" href="/732056.html">
                            javascript - 提问：获取textarea的值，为什么是空的？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title=""$ attrs是只读的"，"$ listeners是只读的"，“避免直接更改道具"." href="/2283932.html">
                            "$ attrs是只读的"，"$ listeners是只读的"，“避免直接更改道具".;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="带有Textarea的拼写检查器" href="/1351678.html">
                            带有Textarea的拼写检查器;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React - setState 不更新值" href="/2365272.html">
                            React - setState 不更新值;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>前端开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
                            此请求已被阻止;内容必须通过HTTPS提供;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = '带有,值,的,react,textarea,是,只读,的,但,需要,更新'; var cat = 'cc';';//qianduan</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>