React textarea with value 是只读的，但需要更新

Posted 2023-05-07

【中文标题】React textarea with value 是只读的，但需要更新

【英文标题】：React textarea with value is readonly but need to be updated

【发布时间】：2016-01-18 05:00:32

【问题描述】：

我的 React 应用程序中有一个文本区域，其中填充了一个值。我希望更新此文本区域并提交表单以更新数据库中的行。

<textarea id="description" className="materialize-textarea" length="120" value=description disabled=isDisabled></textarea>

描述变量用数据库中的值填充文本区域。该字段未禁用。

我尝试附加一个 onChange 事件，该事件调度一个动作 (redux) 来更改 textarea 的值，但它会为每个字母触发并且速度太慢。

如何创建一个由值填充且可编辑的文本区域？

谢谢！

【问题讨论】：

您希望在单击按钮时向您的服务器发送 POST 吗？什么时候按回车？当该字段不再处于焦点时？

我在提交表单时发布

【参考方案1】：

这是一个包含两个文本区域的组件。 props 和 state 之间存在受控关系。这是输入的关键。注意 componentWillReceiveProps。

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

【讨论】：

我使用 Redux，所以状态是用另一种方式管理的。谢谢你的回答。

感谢您的回答

【参考方案2】：

如果您发现使用 onChange 事件太慢，您可以简单地使用 refs 从提交处理程序中的 DOM 读取。此处显示了一个示例：

https://facebook.github.io/react/docs/tutorial.html#adding-new-comments

由于您使用的是 redux，您可能可以将很多功能导出到动作创建者。