web-dev-qa-db-fra.com

Comment puis-je utiliser Ref dans Textfield

mon code d'origine était comme ceci:

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 et description peut obtenir les entrées correctement. Mais quand j'utilise <TextField>:

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

il montre que la valeur passée est null, il semble que ref ne fonctionne pas. Quelqu'un peut-il m'aider à résoudre ce problème?

material-uitextfieldref
8
GG-sof

String Refs sont obsolètes et l'interface utilisateur du matériau ne supporte pas l'utilisation. Je recommande de lire: https://reactjs.org/docs/refs-and-thom.html

Aussi pour obtenir une référence au <input /> Élément Vous devez utiliser la version inputRef Prop. Lisez-y ici .

Si votre React est mis à jour à ce jour, vous devez utiliser createRef du crochet useRef. Vous trouverez ci-dessous quelques exemples

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

Ou si votre React n'est pas à jour, vous pouvez le stocker dans une variable locale, mais ce n'est pas la voie préférée.

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

De plus, vous voudrez peut-être envisager d'utiliser l'état au lieu d'avoir à créer des références pour tous les champs, puis de récupérer les valeurs du DOM.

2
Jap Mul