material-ui - 如何在 TextField 中使用 ref

Question

我原来的代码是这样的:

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>
);}

name和 description可以正确获取输入。
但是当我使用 <TextField> :

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

它显示传递的值是 null ，看来 ref不起作用。
谁能帮我解决这个问题？

Answer 1

不推荐使用字符串引用并且 material-ui 不支持使用它们。我推荐阅读:https://reactjs.org/docs/refs-and-the-dom.html
也可以引用 <input />您应该使用 inputRef 的元素支柱。 Read about it here .
如果你的 React 是最新的，你应该使用 createRef或 useRef钩。下面是一些例子

// Using the useRef() hook. Only possible when you're using a function component.
const App = () => {
  const textRef = useRef();
  const showRefContent = () => {
    console.log(textRef.current.value);
  };
  return (
    <div className="App">
      <TextField inputRef={textRef} />
      <button onClick={showRefContent}>Click</button>
    </div>
  );
}

// Using createRef(). Use this when working in a React.Component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.textRef = createRef();
  }

  showRefContent = () => {
    console.log(this.textRef.current.value);
  };

  render() {
    return (
      <div className="App">
        <TextField inputRef={this.textRef} />
        <button onClick={this.showRefContent}>Click</button>
      </div>
    );
  }
}

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

class App extends React.Component {
  showRefContent = () => {
    console.log(this.textRef.value);
  };

  render() {
    return (
      <div className="App">
        <TextField inputRef={element => (this.textRef = element)} />
        <button onClick={this.showRefContent}>Click</button>
      </div>
    );
  }
}

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