使用 div 的两种方式数据绑定

Question

我正在使用带有 redux 的 reactjs。我创建了一个可编辑的 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} />);

ContentEditableclass

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 的两种方式数据绑定

Two way data binding using div

javascript

reactjs

redux

react-redux