Question

在我的 react.js 应用程序中，我有以下对话框：

                <Dialog  open={this.state.dialogIsOpen} onClose = {this.closeDialog} >
                    <DialogTitle id="simple-dialog-title">Create New Test User</DialogTitle>
                    <DialogContent>

                        <Grid container>
                            <Grid item xs = "6">
                                <label htmlFor = "id">Id: </label>
                            </Grid>
                            <Grid item xs = "6">
                                <input id = "id" value = {this.state.id}></input>
                            </Grid>

                            <Grid item xs = "6">
                                <label htmlFor = "name">Name: </label>
                            </Grid>
                            <Grid item xs = "6">
                                <input id = "name" value = {this.state.name}></input>
                            </Grid>

                            <Grid item xs = "6">
                                <label htmlFor = "email">Email:</label>
                            </Grid>
                            <Grid item xs = "6">
                                <input id = "email" value = {this.state.email}></input>
                            </Grid>
                        </Grid>
                        <button onClick = {this.createUser}>OK</button>
                    </DialogContent>
            </Dialog>

底部按钮调用如下函数：

    createUser()
    {
        alert(this.state.email);
        alert(this.state.users.length);
        var newUser = {
            id: this.state.id,
            name: this.state.name,
            emailAddress: this.state.email
        }
        this.state.users.push(newUser);
        this.closeDialog();
    }

调用createUser函数时，this.state.email、name、id都是未定义的。但是， this.state.users 是我期望的数组。输入似乎没有正确绑定到状态值。我需要做些什么来绑定对话框中的输入？

Answer 1

除了使用 .then((resp) => { if (!resp.ok) return; // or do something else page_data = resp.json(); callback(); })

之外，您不应该改变状态变量

试试这个：

setState

而不是调用 this.setState({ users: [...users, newUser] })

Answer 2

我找到了解决方案：

我必须为每个输入创建一个 onChange 处理程序，以便在用户输入输入时将数据更改发送回模型。我发现here
我必须使 onchange 处理程序通用here

React.js 输入未绑定到值

2 个答案: