反应textarea的值是只读的，但需要更新

Question

我有一个textarea在我的React应用程序中充满了值。我希望这个textarea被更新，并且表单被引用来更新数据库中的行。

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

description变量用来自数据库的值填充textarea。该字段未被禁用。

我试图附加一个onChange事件，它派发一个动作（redux）来更改textarea的值，但它会触发每个字母，并且它太慢。

如何创建一个由值填充并且可编辑的textarea？

谢谢！

Answer 1

这是一个包含两个textareas的组件。道具与国家之间有一种受控的关系。这是投入的关键。注意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); 
     } 
    } 

Answer 2

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

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

由于您使用的终极版，您可以在很多的功能可能导出到行动的创建者。