divを使用した双方向データバインディング

Question

私はreduxとreduxで作業しています。 inputのテキストフィールドの代わりにdivという編集可能なアイテムを作成しましたが、値を受け取ることができません。

したがって、inputのテキストフィールド。 onChangeというイベントがあり、inputフィールドの値タイプにアクセスできます。例えば -

handlechange(e){ 
console.log(e.target.value); //get the value of textbox then i further save it in state 
} 
render() 
{ 
    return (
     <input 
      onChange={this.handleChange.bind(this)} 
      value={this.state.msgText} 
     </> 
)} 

しかし、私は

handleKeyUp(e){ 
     var t = this; 
     console.log('test'); 
     console.log(e); 
     console.log(e.target.value); // I have read ,i can only receive the keycode here,cannot receive value 
console.log(this.state.msgText); //So i should receive the value here but i am not 
      if(e.which == 13) { 
      e.preventDefault(); 
      //reset the state for clear the div 
      t.setState({ 
       msgText: "" 
      }); 
      } 
     } 

はこれを行う方法は、上のIDを追加したらhandleKeyUp機能で、だから、この

<div 
      role="textbox" 
      ref={function(e){if(e != null) e.contentEditable=true;}} 
      title="Type the text" 
      //onChange={this.handleChange.bind(this)} 
      onKeyUp={this.handleKeyUp.bind(this)} 
     > 
      {this.state.msgText} 
     </div> 

のように同じのために編集可能なdiv要素を使用していますこのようなdiv -

<div 
      id={"fc-"+ this.props.thread.uid + "-textbox"} 
      role="textbox" 
      className="ifc-chat-window-textbox-input" 
      ref={function(e){if(e != null) e.contentEditable=true;}} 
      title="Type the text" 
      //onChange={this.handleChange.bind(this)} 
      //onKeyUp={this.handleKeyUp.bind(this)} 
     > 
      {this.state.msgText} 
     </div> 

はその後

componentDidMount(){ 
     var t = this; 
     var node = document.getElementById("fc-"+ this.props.thread.uid + "-textbox"); 
var value = node.textContent; // I receive the value here 
     node.onkeypress = function(event){ 
      t.setState({ 
      msgText: node.textContent 
      });    }); 
      if(event.which == 13) { 
      event.preventDefault(); 
      t.sendMsgObject(value , t.props.thread.uid, t.props.thread.name, t.props.thread.color, t.props.actions, t.props.user); 
      //reset the state for clear input field 
      t.setState({ 
       msgText: "" 
      }); 
      } 

componentDidMount機能でこのすべてが正常に動作しますが、私はそれは、物事が反応にどのように働くかあると思ういけません。私はdivにIDを使用せずにこれを行うことを探しています。

Answer 1

私はそれのようなものを試しましたか？

var handleChange = function(event){ 
    this.setState({html: event.target.value}); 
}.bind(this); 

return (<ContentEditable html={this.state.html} onChange={handleChange} />); 

のcontentEditableクラス

var ContentEditable = React.createClass({ 
    render: function(){ 
     return <div 
      onInput={this.emitChange} 
      onBlur={this.emitChange} 
      contentEditable 
      dangerouslySetInnerHTML={{__html: this.props.html}}></div>; 
    }, 
    shouldComponentUpdate: function(nextProps){ 
     return nextProps.html !== this.getDOMNode().innerHTML; 
    }, 
    emitChange: function(){ 
     var html = this.getDOMNode().innerHTML; 
     if (this.props.onChange && html !== this.lastHtml) { 

      this.props.onChange({ 
       target: { 
        value: html 
       } 
      }); 
     } 
     this.lastHtml = html; 
    } 
});