Двунаправленная привязка данных с использованием div

Question

Я работаю с реакцией с редукцией. Я создал редактируемый div вместо текстового поля input, но не смог получить это значение.

Итак, в 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} 
     </> 
)} 

Но я использую редактируемой DIV для таких же, как этот

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

Таким образом, в функции handleKeyUp

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

После того, как способ сделать это, добавив идентификатор на div like this -

<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

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

Все это прекрасно работает, но я не думаю, что это, как все работает в среагировать. Я смотрю на это, не используя id для div.

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