Question

我正在使用reactjs和redux。我创建了一个可编辑的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上添加id -

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

使用div的双向数据绑定

1 个答案: