反應鏈接狀態表格

我想要什麼：
我想創建一個模式窗體，以編輯表。
我點擊編輯在我的表格行結束時，模態窗體打開，我可以編輯我的輸入值，並保存或關閉。
但我想，當我更新我的表單在我的模態中，==模式更新後面的表本身。反應鏈接狀態表格

我做了什麼：
一切都在我的桌子的工作，除了更新「活」。

我的代碼：

const Trigger = React.createClass({ 
    getInitialState() { 
    return { 
     show: false, 
     name: this.props.name, 
     start: this.props.start, 
     end: this.props.end, 
     id: this.props.id 
    }; 
    }, 
    save: function(){ 
    var data = { 
     name: this.state.name, 
     start: this.state.start, 
     end: this.state.end, 
     id: this.state.id 
    }; 
    $.ajax({ 
     ... 
    }); 
    }, 
    handleNameChange: function(event) { 
    this.setState({ name: event.target.value }); 
    }, 
    handleStartChange: function(event) { 
    this.setState({ start: event.target.value }); 
    }, 
    handleEndChange: function(event) { 
    this.setState({ end: event.target.value }); 
    }, 
    render() { 
    let close =() => this.setState({ show: false}); 
    var name = this.state.name; 
    var start = this.state.start; 
    var end = this.state.end; 
    return (
     <div className="modal-container"> 
     <Button 
      bsStyle="primary" 
      bsSize="large" 
      onClick={() => this.setState({ show: true})} 
     > 
      Edit 
     </Button> 
     <Modal 
      show={this.state.show} 
      onHide={close} 
      container={this} 
      aria-labelledby="contained-modal-title" 
     > 
      <Modal.Header closeButton> 
      <Modal.Title id="contained-modal-title">Edit Presentation</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
      <form className="form-horizontal"> 
       <Input type="text" label="Name" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={name} onChange={this.handleNameChange}/> 
       <Input type="text" label="Start" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={start} onChange={this.handleStartChange}/> 
       <Input type="text" label="End" labelClassName="col-xs-2" wrapperClassName="col-xs-10" value={end} onChange={this.handleEndChange}/> 
      </form> 
      </Modal.Body> 
      <Modal.Footer> 
      <Button onClick={this.save}>Save</Button> 
      <Button onClick={close}>Close</Button> 
      </Modal.Footer> 
     </Modal> 
     </div> 
    ); 
    } 
}); 

var Presentations = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 
    loadPresentationsFromServer: function(){ 
    AJAX... 
      this.setState({presentations_parse: data});  
    }, 
    getInitialState: function() { 
    return { 
     presentations_parse: [] 
    }; 
    }, 
    componentDidMount: function() { 
    this.loadPresentationsFromServer(); 
    setInterval(this.loadPresentationsFromServer, this.props.pollInterval); 
    }, 
    render: function(){ 
    var presentations = this.state.presentations_parse.map(function(presentation) { 
     return (
     <tr key={presentation.objectId}> 
      <td >#</td> 
      <td >{presentation.name}</td> 
      <td >{presentation.start.iso}</td> 
      <td >{presentation.end.iso}</td> 
      <td ><Trigger id={presentation.objectId} name={presentation.name} start={presentation.start.iso} end={presentation.end.iso}/></td> 
     </tr> 
    ); 
    }); 

const tableInstance = (
     <Table striped bordered condensed hover> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Start</th> 
      <th>End</th> 
      <th>Edit</th> 
      </tr> 
      </thead> 
      <tbody> 
       {presentations} 
      </tbody> 
     </Table> 
    ); 
    return (
     tableInstance 
    ); 
    }} 
);

問題：
我嘗試使用鏈路狀態，我包括mixins: [React.addons.LinkedStateMixin]。
我在地圖函數裏寫了valueLink={this.linkState('presentation.name')}。
問題是this.linkState未定義。
我不知道如何實現this.linkState('...?...')，在哪裏寫它，因爲我使用了map函數。
我不知道如何鏈接linkState與演示文稿。（呈現小號 = {呈現，演示，演示Ñ}）

EDIT 1
問題並非來自LinkedStateMixin，因爲我嘗試這樣做的代碼和它的工作原理：

var DisplayContainer2 = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 
    getInitialState:function(){ 
     return{ 
      value:'My Value' 
     } 
    }, 
    render:function(){ 
     return (
      <div className="DisplayContainer"> 
       <h4>{this.state.value}</h4> 
       <InputBox2 valueLink={this.linkState('value')} /> 
      </div> 
     ); 
    } 
}); 

var InputBox2 = React.createClass({ 
    render:function(){ 
     return (<input type="text" valueLink={this.props.valueLink} />) 
    } 
});

所以我認爲這是因爲我在map函數中寫了this.linkState。
但我不知道在哪裏寫它。
有什麼想法？

編輯2：
我在這裏更改我的代碼，使用可選的thisArg參數映射。
我瞭解問題，我不再有問題this.linkState is undefined。
但其他兩個問題：

未捕獲的錯誤：精縮例外
我如何可以使用多個鏈路狀態？我想爲我的表的每一列使用一個。

來源

2015-12-05 papay0

您確定您正在獲取mixin嗎？根據文件，似乎你會分開安裝它並獲取模塊。 var LinkedStateMixin = require（'react-addons-linked-state-mixin'）; –

是的，我確定mixin安裝正確。另一個代碼有效。（參見後文編輯1） – papay0

請記住，'.map'會爲傳遞給它的函數創建一個新的上下文，除非您使用'map（function（）函數，否則'this'不會指向您的想法。 ..）{...} .bind（this））'，使用可選的'thisArg'參數來映射'，或者如果使用ES6，則使用箭頭函數。有關更多詳細信息，請參見[此SO問題/答案]（http://stackoverflow.com/a/33030325/62082）。 –

我認爲這是一個簡單的範圍問題。

嘗試這種方式

render(or wtv function): function() { 
    var self = this; 
    newarray = someStuff.map(function() { 
     self.MyHigherScopeMixin ... 

    }) 
}

這或使用呼叫/應用功能。

希望它有幫助

來源

2015-12-05 15:39:54

反應鏈接狀態表格

回答

相關問題