Material ui 如何在TextField中使用ref

我的原始代码是这样的：

handleClick() {
  var name = this.refs.name.value;
  var description = this.refs.description.value
}
render () {
return (
  <React.Fragment>
    <input ref='name' placeholder='Enter the name of the item' />
    <input ref='description' placeholder='Enter a description' />
    <Button onClick={this.handleClick.bind(this)}>Submit</Button>
  </React.Fragment>
);}

它显示传递的值为

null

，似乎

ref

不起作用。

---

有人能帮我解决这个问题吗？

字符串引用已弃用，材质ui不支持使用它们。我建议阅读：

此外，要获得对

元素的引用，应使用

inputRef

属性

如果您的React是最新更新，您应该使用

useRef

钩子的

createRef

。下面是一些例子

//使用useRef（）钩子。只有在使用功能组件时才可能。
常量应用=（）=>{
const textRef=useRef（）；
常量showRefContent=（）=>{
console.log（textRef.current.value）；
};
返回(
点击
);
}

//使用createRef（）。在React.组件中工作时使用此选项
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.textRef=createRef（）；
}
showRefContent=（）=>{
log（this.textRef.current.value）；
};
render（）{
返回(
点击
);
}
}

或者，如果您的React不是最新的，您可以将其存储在局部变量中，但这不是首选的方式

类应用程序扩展了React.Component{
showRefContent=（）=>{
console.log（此.textRef.value）；
};
render（）{
返回(
（this.textRef=element）}/>
点击
);
}
}

---

此外，您可能需要考虑使用状态而不是必须为所有字段创建REFS，然后从DOM中检索值。

这是否回答了您的问题？

<TextField ref='name' placeholder='Enter the name of the item' />