Zwei-Wege-Datenbindung mit div

Question

Ich arbeite mit reactjs mit redux. Ich habe ein editierbares div anstelle von input Textfeld erstellt, kann aber den Wert nicht empfangen.

Also, in input Textfeld. Es gibt ein Ereignis mit dem Namen onChange, über das Sie auf den Werttyp im Feld input zugreifen können. Zum Beispiel -

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} 
     </> 
)} 

Aber ich für gleiche das editierbare div bin mit wie diese

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

in handleKeyUp Funktion

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: "" 
      }); 
      } 
     } 

Sobald Weg, dies zu tun auf Also, ist das Hinzufügen von id div wie folgt -

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

Dann in componentDidMount Funktion

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: "" 
      }); 
      } 

Das alles funktioniert gut, aber ich denke nicht, daß das ist, wie die Dinge funktionieren reagieren. Ich versuche, dies zu tun, ohne id zu div zu benutzen.

Answer 1

haben Sie so etwas probiert?

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

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

contentEditable Klasse

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