ReactJS双向绑定

<form id="rd"></form>
<script type="text/babel">
var data ={title:123,items:[
    {a:1,b:2},
    {a:4,b:3}
    ]};
var DOM=React.createClass({
    getInitialState:function(){
        return data
        },
    handleChange:function(e){
        var name=e.target.name;
        eval('(function(){data.'+name+'=this.target.value})').call(e);
        this.setState(data);
        console.log(data);
    },
    change:function(){
        data.title=Math.random();
        for(var v of data.items){
            v.a=Math.random();
            v.b=Math.random();
        }
        data.items.push({a:new Date().getTime()});
        this.setState(data);
    },
    render:function(){
        var t=this,state=this.state;
        return (
            <div>
 <p>title:<input name="title" value={state.title} onChange={this.handleChange}/><span>{state.title}</span></p>
     <table>
        <tr><th>a</th><th>b</th></tr>
         {
         (state.items||[]).map(function (v,i) {v.key=v.key||Math.random();
         return <tr key={v.key}>
             <td><input name={"items["+i+"].a"} value={v.a} onChange={t.handleChange}/></td>
             <td><input name={"items["+i+"].b"} value={v.b} onChange={t.handleChange}/></td>
         </tr>
         })
         }
     </table>
    <p><input type="button" value="change" onClick={this.change}/></p>
    </div>
            )
    }
});
ReactDOM.render(<DOM />,document.getElementById('rd'));
</script>