1

我正在尝试开发多步注册，参考此链接：https ://www.viget.com/articles/building-a-multi-step-registration-form-with-react

但我不能使用 refs 也不知道如何解决这个问题。

这是我每次单击“下一步”按钮时收到的错误消息 错误消息

这是我的代码

              <input type="text"
                     className='singleComponent'
                     name='AppName'
                     ref='AppName'
                     defaultValue={ this.props.fieldValues.AppName }
                     />

            <button>Cancel</button>
            <button onClick={this.SaveAndContinue}>Next</button>


  SaveAndContinue(e){
      e.preventDefault();

    var data={
        AppName : this.refs.AppName,
  }

    this.props.saveValues(data)
    this.props.nextStep()
  }

  }

依赖项：

"react": "^16.1.0",
"react-dev-utils": "^4.2.1",
"react-dom": "^16.1.0",

有人可以帮忙吗？

谢谢，

4

2 回答 2

0

问题通过修改按钮解决：

    <button onClick={this.SaveAndContinue.bind(this)}>Next</button>
于 2017-12-06T07:31:36.290 回答
0

虽然这可能不是您所看到问题的确切原因，但建议您从使用字符串引用的实现更新为回调版本。

所以而不是： ref='AppName'

利用： ref={(input) => { this.AppName = input; }}

然后您将通过以下方式访问该元素的引用AddApplicationField： this.AppName

这可能会解决您的问题，因为遗留字符串 ref 方法存在已知问题。

在此处查看更多信息： https ://reactjs.org/docs/refs-and-the-dom.html

于 2017-12-06T03:11:35.993 回答