使用react js在firebase中编辑数据

时间:2015-03-31 06:28:47

标签: javascript json firebase reactjs

我是React和firebase的新手,所以我在这里尝试编辑数据,这是我的代码。

function nestedjson(data,pair){
    for(var key in data){
        if(typeof(data[key])=='object'){ 
          pair.push(<div className='Sub-data'><p>{key}</p></div>);
          nestedjson(data[key],pair);

        }else{
         pair.push(<div className='Data-row'><p>{key} : <input type="text"  defaultValue={data[key]} name={key} /></p></div>);
        }

      }
   }
var FirebaseItem = React.createClass({

  render: function() {
var pairs =[];
   var data = this.props.data; 
   for(var key in data){
    if(typeof(data[key])=='object'){
       pairs.push(<div className='Sub-data'><p>{key}</p></div>);
          nestedjson(data[key],pairs);

        }else{

          pairs.push(<p>{key} : <input type="text" defaultValue={data[key]} name={key} /></p>);
        }
   }
    return (
           <div className="Data-item">{pairs}</div>
    );
  }
});

var FirebaseList = React.createClass({
  render: function() {
    var FirebaseData = this.props.data.map(function (obj) {
      return (
           <FirebaseItem data = {obj}/>
      );
    });

    return (

           <div className="Datalist">

        {FirebaseData}
      </div>  
    );
  }
});
var FirebaseApp = React.createClass({
     getInitialState: function() {
    this.items = [];
    return {items: []};
  },

  componentWillMount: function() {
    this.firebaseRef = new Firebase("https://docs-examples.firebaseio.com/web/saving-data/fireblog");
    this.firebaseRef.on("child_added", function(dataSnapshot) {
      this.items.push(dataSnapshot.val());
      this.setState({
        items: this.items
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.firebaseRef.off();
  },

  handleChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();

  },
  render: function() {
    var FirebaseData=this.state.items;
     var handleChange=function(evt) {
      var firebaseRef = new Firebase("https://docs-examples.firebaseio.com/web/saving-data/fireblog");
        var k = evt.target.name;
        var v =evt.target.value;
      var onComplete = function(error) {
      if (error) {
      console.log('Synchronization failed');
      } else {
      console.log('Synchronization succeeded');
      }
      };
        firebaseRef.update({ k : v},onComplete);


    }.bind(this);
    return (
       <form onChange={handleChange }>
<FirebaseList data = { this.state.items }/>
</form>

    );
  }
})
React.render(

  <FirebaseApp/>,
  document.getElementById('Datawrap')
);

问题是数据随时间而变化,因此密钥未知。我无法找到我编辑过的密钥。 任何帮助都会很棒。谢谢。

0 个答案:

没有答案