原始答案

Question

我正在使用React JS + Material UI核心开发一个Web应用程序。现在，我正在使用材料ui控件构建表单。现在，我试图使用React的引用来检索输入字段值（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);

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

alert(this.refs.name.value)

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

我也用这种方式。

我在构造函数中创建引用

 constructor(props)
    {
        super(props)

        this.nameRef = React.createRef();
    }

然后设置TextField的引用

<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，您需要向inputRef上的<TextField />道具传递回调。

因此，除了原始答案外，还请尝试以下操作：

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

Answer 2

对我来说，这可以解决问题：

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

Answer 3

如果您将无状态功能组件与材料ui一起使用，则可以使用react挂钩。

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

无法使用React JS中的引用检索材料UI的输入字段

3 个答案:

原始答案

更新后的答案