reactjs - 无法在 React js 中使用 refs 检索 Material UI 的输入字段

Question

我正在使用 React JS + Material UI 核心开发 Web 应用程序。现在，我正在构建一个带有 material 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 的引用

<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" />