javascript - react 引导模态上下文

我对引导程序模式有疑问。从中调用的函数似乎与从组件其他部分调用的函数具有不同的上下文。当我在处理从select元素进行选择的功能（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);
  }

最佳答案

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

handleSelect(e){
    this.setState({selectedPhone:e.target.value.slice(0)});
   console.log(this.state.selectedPhone);
   this.toggleModal();
  }

confirmChange(e){
    console.log(this.state.selectedPhone);
  }