Material UI v5 TextField的inputRef属性无法传递到输入组件怎么办？

原因说明 #

你遇到的问题是因为v5版本重构了TextField的属性结构，v4中可用的顶层inputRef属性已经被移除，无法直接通过该属性绑定原生输入框的ref。

正确实现方式 #

方案1：通过inputProps传递ref #

该方式可以直接把ref绑定到原生input元素上，是官方推荐的写法：

it('ref passed to input component', () => {
    let myref = React.createRef();
    // ref放在inputProps对象中传入
    const wrapper = enzyme.mount(<TextField inputProps={{ ref: myref }} />);
    chai.expect(myref.current).to.not.be.null;
});

方案2：通过顶层ref获取组件实例后取input属性 #

给TextField传顶层ref后，拿到的是TextField组件的实例，可通过实例的input属性获取原生输入DOM：

it('ref passed to input component via top ref', () => {
    let myref = React.createRef();
    const wrapper = enzyme.mount(<TextField ref={myref} />);
    // 从组件实例中取input属性
    chai.expect(myref.current.input).to.not.be.null;
});

注意事项 #

如果是直接使用未封装的Input/OutlinedInput/FilledInput组件，可以直接给组件传ref获取原生输入元素，不需要用上述写法。

内容的提问来源于stack exchange，提问作者Tom