web-dev-qa-db-ja.com

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

nameとdescription入力を正しく入手できます。しかし、私が使うとき<TextField>：

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

渡された値がnullであることはrefが機能しないようです。誰かがこの問題を解決するのを手伝ってくれる？

material-uitextfieldref
8
GG-sof

文字列参照は推奨されていて、マテリアル-UIはそれらの使用をサポートしません。読むことをお勧めします. https://realctjs.org/docs/refs-and-the-dom.html

また、_<input />_要素にREFを取得するには、inputRef propを使用する必要があります。 ここでそれについて読む 。

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

また、すべてのフィールドの参照を作成してからDOMの値を取得するのではなく、状態を使用することを検討してください。

2
Jap Mul