Question

Material-UI V1 beta。

在Docs中找不到答案如何选择TextField组件的文本？

Answer 1

创建一个ref，然后调用ref的值。像这样：

<TextField ref="myTextField" />

// Call this in the component that contains the text field so 'this' is set properly
function getTextFieldValue() {
    return this.refs.myTextField.getValue();
}

这被称为不受控制的反应组分。另一种方法是使用受控组件并将值保存在您的状态中。以下是有关受控组件和非受控组件之间差异的一些信息：https://reactjs.org/docs/uncontrolled-components.html

Answer 2

如果您使用的是无状态功能组件，则可以使用react挂钩。

还要确保您正在使用inputRef

import React, { useState, useRef } from "react";

let MyFunctional = props => {
  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            console.log(textInput.current.value);
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};

Material-UI - TextField - 以编程方式选择文本

2 个答案: