react contenteditable example

using content editable to edit an object's values

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<a href="http://jsfiddle.net/kb3gN/8349/"> this fiddle was my starting point </a> -- <a href="http://blog.brng.us">my blog discusses this</a>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

span[contenteditable=true] {
  border: 1px dashed #AAA;
  padding: 5px;
}
li{
    margin: 5px;
}
label {
    padding:10px;
}

JavaScript 1.7

var node1 ={
owner: "i am the owner",
where: "right here bitch",
name: "Joe Super Fucking AWESOME"}

var ContentEditable = React.createClass({
    render(){
        return( <span id="contenteditable"
            onInput={this.emitChange} 
            onBlur={this.emitChange}
            contentEditable >
                
                {this.props.item} 
                
            </span> )
            
    },
    emitChange(){
        var html = this.getDOMNode().innerHTML;
        if (this.props.onChange && html !== this.lastHtml) {
            this.props.onChange({
                target: {
                    value: html,
                    name: this.props.name
                }
            });
        }
        this.lastHtml = html;
    }
});
var Item = React.createClass({
    getInitialState(){
        return {result: ""}
    },
    handleClick(event){
        console.log("click",this.state)
        //$(body).append(this.state)
    },
    handleChange(event){
        console.log("change",this.state);
        var x = this.state[event.target.name];
        console.log("x",x,event.target.name);
        var o = {}
        o[event.target.name] = event.target.value;
        this.setState(o);
        },
    
    render(){
        var keys = Object.keys(this.props.i)
        return(<div>
                {keys.map(function(key){
                    var item = this.props.i[key]
                    return(
                        <li>
                        <label>{key}:</label>
                        <ContentEditable name={key} item={item} onChange={this.handleChange} />
                        </li>
                   );},this)}
                    
        <button onClick={this.handleClick} >
            Pretend to send to a server or something
        </button>
        <div>result<pre>{JSON.stringify(this.state,null, 2)}</pre></div>
        </div>)
    }
});
var MyDiv = React.createClass({
    //mixins: [Reflux.connect(TheStore)],
    render(){
       ...