Question

我对引导程序模式有疑问。从中调用的函数似乎与从组件其他部分调用的函数具有不同的上下文。当我在处理从选择元素中进行选择的功能（handleSelect（））中检查this.selectedPhone的值时，期望值就在那。当我打开模态并按下一个调用ConfirmChange（）函数的按钮时，该函数中的值就是我为此构造函数中为此this.selectedPhone设置的初始值。

<tr>
    <td>{this.props.todo.name}</td>
    <td>{this.props.todo.version}</td>
    <td><select ref={(select) => {this.newVersion = select}} onChange={this.handleSelect} className="versionInput">
    {this.props.versions.filter(version => version.chain === this.props.todo.chain).map(version =>
      <option selected={version.name===this.selectedPhone} value={version.name}>{version.name}</option>
        ) }
    </select></td>
    <td >{this.props.todo.chain}</td>
    <td >{this.props.todo.store}</td>
    <Modal selectedPhone={this.selectedPhone} onHide={this.props.toggleModal} show={this.props.showModal}>
      <Modal.Header closeButton>
         <Modal.Title>Change: {this.props.todo.name}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
         <p>Change to:</p><label>{this.props.todo.version}</label>
      </Modal.Body>
      <Modal.Footer>
      <button className="btn btn-primary" onClick={this.confirmChange}>Change</button>
         <button className="btn btn-danger" onClick={this.toggleModal}>Cancel</button>
      </Modal.Footer>
   </Modal>
  </tr>

以下是绑定到DOM的功能：

confirmChange(e){
    console.log(this.selectedPhone);//Always outputs the initial value that is set in the constructor of component
  }
  handleSelect(e){
    this.selectedPhone=e.target.value.slice(0);
   console.log(this.selectedPhone); //The right value output in console
   this.toggleModal();
  }
  toggleModal(){
      this.props.toggleModal();
  }

这是建设者：

constructor(props){
      super(props);
      this.toggleModal=this.toggleModal.bind(this);
      this.onChange=this.onChange.bind(this);
      this.handleSelect=this.handleSelect.bind(this);
      this.confirmChange=this.confirmChange.bind(this);
      this.newValue=this.newValue;
      this.selectedPhone=this.props.todo.phone.slice(0);
  }

Answer 1

最好使用selectedPhone状态而不是使用变量。尝试使用以下方式

Run() -> 
Client.OnMessage((receivedMessage) =>
            {
                try
                {
                   //Order API call here
                }
                catch
                {

                }
            });

Answer 2

因此，此问题的答案是每个表行组件都有一个对话框，其show属性绑定到redux状态...因此，当通过更改redux状态打开对话框时，实际上打开的对话框与那里的一样多是表中的行，这解释了混乱情况。

反应引导模态上下文

2 个答案: