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

【问题标题】：React textarea with value is readonly but need to be updatedReact textarea with value 是只读的，但需要更新
【发布时间】：2016-01-18 05:00:32
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

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

标签： javascript reactjs textarea redux

【解决方案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，您可能可以将很多功能导出到动作创建者。

【讨论】：