Question

当我将输入转换为TextField

时，我有一个问题是恢复输入的值

这是有效的代码：

<form onSubmit={(e) => this.goToNextStep(e)}>
  <input type="text" className="form-control" placeholder="Name" pattern="[A-Za-z-]{1,}" required ref={(input) => {this.nameInput = input}} />
  <RaisedButton label="GO" color="primary" primary={true} type="submit" />
</form>

goToNextStep函数：

goToNextStep = event{
event.preventDefault;
const name = this.nameInput.value;
console.log(name);
}

所以有了这个，当我提交时，我得到了回名。

但是，当我提交时，我不会得到这个名字。

那些不起作用的代码：

<form onSubmit={(e) => this.goToNextStep(e)}>
  <TextField ref={(input) => {this.nameInput = input}} floatingLabelText="Name" pattern="[A-Za-z-]{1,}" required /> 
  <RaisedButton label="GO" color="primary" primary={true} type="submit" />
</form>

你知道它为什么不起作用吗？怎么做好？

感谢您的帮助：）

Answer 1

您有ref个组件实例，而不是真正的<input>

<TextField ref={(input) => {this.nameInput = input}} floatingLabelText="Name" pattern="[A-Za-z-]{1,}" required />

详细了解it in docs。不幸的是，我没有看到传递参考回调的方法to TextField component。

材料ui和reactjs，<textfield>与ref：不起作用

1 个答案: