时间戳

首页 > 解决方案 > 反应引导模式上下文

javascript - 反应引导模式上下文

问题描述

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

标签： javascriptreactjsreduxreact-reduxreact-bootstrap

解决方案

最好使用 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);
  }

推荐阅读