javascript - react linkState形式

我想要的是：
我想创建一个模式表格来编辑表格。
我单击表格行末尾的“编辑”，将打开一个模式窗体，可以编辑输入值，然后保存或关闭。
但是我想当我在模式中更新表单时，==>模式更新本身后面的表。

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

我的代码：

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]。
我在map函数中编写了valueLink={this.linkState('presentation.name')}。
问题是this.linkState未定义。
我不知道如何实现this.linkState('...?...')，在哪里写，因为我使用了map函数。
我不知道如何将linkState与演示文稿链接。 （演示文稿= {演示文稿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。
但是还有另外两个问题：


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

最佳答案

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

这样尝试

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

    })
}

或使用调用/应用功能。

希望能帮助到你

关于javascript - react linkState形式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34105410/