反应链接状态形式

Question

我想要什么：
我想创建一个模态表单以编辑表格。
我单击表格行末尾的编辑，打开一个模态表单，我可以编辑我的输入值，然后保存或关闭。
但是我想，当我在我的模态中更新我的表单时, ==> 模态后面的表格会自行更新。

我做了什么：
一切正常，除了我的表的“实时”更新。

我的代码：

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
    );
  }}
);

问题：
我尝试使用 linkState，我包含了mixins: [React.addons.LinkedStateMixin]。
我在地图函数中写了valueLink={this.linkState('presentation.name')}。
问题是 this.linkState 是未定义的。
我不知道如何实现this.linkState('...?...')，在哪里写，因为我使用了一个map函数。
我不知道如何将 linkState 与演示文稿联系起来。 （演示s = {演示1，演示2，演示n}）

编辑 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。
但是另外两个问题：

1. 未捕获的错误：缩小的异常
2. 如何使用多个linkState？我想为表格的每一列使用一个。

Answer 1

我认为这是一个简单的范围问题。

试试这个方法

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

    })
}

或者使用调用/应用函数。

希望对你有帮助