无法使用react js中的refs检索材料UI的输入字段

Question

我正在使用 React JS + Material UI 核心开发一个 Web 应用程序。现在，我正在使用材质 ui 控件构建一个表单。现在，我正在尝试使用 React 的 refs 检索输入字段值（TextField）。它总是说未定义。

这是我的组件

class CreateEventComponent extends React.Component{

    constructor(props)
    {
        super(props)


    }


    submitCreateEventForm(e)
    {
        e.preventDefault();
        alert(this.refs.name.input.value)
    }

    render()
    {
        return (
            <MuiThemeProvider>
            <div className={scss['page-container']}>
            <Grid
            spacing={16}
            container>
                <Grid item md={12}>
                    <Card>
                    <CardContent>
                        <form onSubmit={this.submitCreateEventForm.bind(this)}>
                        <div>
                            <TextField
                            ref="name"
                            className={scss['form-control']}
                            name="name"
                            label="Name" />
                        </div>

                        <div>
                        <Grid>
                        <Button type="submit" color="primary" variant="raised">Save</Button>
                        </Grid>
                        </div>
                        </form>
                    </CardContent>
                    </Card>
                </Grid>
            </Grid>
            </div>
            </MuiThemeProvider>
        )
    }

}

function mapStateToProps(state)
{
    return {

    };
}

function matchDispatchToProps(dispatch)
{
    return bindActionCreators({

    }, dispatch);
}

const enhance = compose(withWidth(), withStyles(themeStyles, { withTheme: true }), connect(mapStateToProps, matchDispatchToProps))
export default enhance(CreateEventComponent);

如您所见，当表单提交时，我正在尝试使用 refs 来提醒名称输入字段。但它总是显示“未定义”。我尝试使用它来获取 TextField 的值。

alert(this.refs.name.value)

它会抛出错误，说名称未定义。那么，如何使用 Ref 获取 TextField 的值呢？

我也是这样用的。

我在构造函数中创建 ref

 constructor(props)
    {
        super(props)

        this.nameRef = React.createRef();
    }

然后设置TextField的ref

<TextField
                            ref={this.nameRef}
                            className={scss['form-control']}
                            name="name"
                            label="Name" />

然后以这种方式检索值。

this.nameRef.value
this.nameRef.input.value

它也给了我同样的错误。

Answer 1

原始答案

您需要在构造函数中创建一个ref。

来自docs：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); // create a ref
    }

    render() {
        return <div ref={this.myRef} />;
    }
}

更新答案

根据 Material UI 的 documentation，您需要将回调传递给 <TextField /> 上的 inputRef 属性。

所以，除了原来的答案，也试试这个：

<TextField
    inputRef={e => this.nameRef = e}
    className={scss['form-control']}
    name="name"
    label="Name" />

Answer 2

如果您正在使用带有材质 ui 的无状态功能组件，那么您可以使用 react hooks。

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

let MyComponent = (props) => {

  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
            textInput.current.click();
            textInput.current.value="myname";
            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>
  );
};

Answer 3

对我来说，这解决了问题：

<TextField
  ref={this.nameRef}
  onChange={e => {
    this.nameRef.current.value = e.target.value;
  }}
  className={scss['form-control']}
  name="name"
  label="Name" />