Question

我在这里添加示例代码。我现在要从状态获取静态值，我想更改此值

render() {
    console.log(this.props.selectedVal);
    var name,
        gender,
        city = "";

    this.props.data.map((row, index) => {
        // console.log(index);
        if (this.props.selectedVal === index) {
            gender = row[0];
            name = row[1];
            city = row[2];
        }
        return [];
    });

    return (
        <Dialog
            open={this.props.open}
            onClose={this.handleClose}
            aria-labelledby="alert-dialog-title"
            aria-describedby="alert-dialog-description"
        >
            <h1>Edit User</h1>
            <DialogContent>
                <DialogContentText id="alert-dialog-description" />
                <Formik
                    initialValues={{ name: "", gender: "", city: "" }}
                    onSubmit={values => console.log(values)}
                >
                    {props => (
                        <form>
                            <TextField margin="dense" id="name" label="Name" value={name} />
                            <br />
                            <TextField
                                margin="dense"
                                id="gender"
                                label="Gender"
                                value={gender}
                            />
                            <br />
                            <TextField margin="dense" label="City" value={city} />
                        </form>
                    )}
                </Formik>
            </DialogContent>
            <DialogActions>
                <Button onClick={this.handleClose} color="primary">
                    RESET
                </Button>
                <Button onClick={this.handleClose} color="primary" autoFocus>
                    SUBMIT
                </Button>
            </DialogActions>
        </Dialog>
    );
}

我正在从表格行中获取值。现在我想使用formik更改这些值。如何修改这些值

Answer 1

在文本字段中添加一个onChange侦听器，并将其值映射到状态变量：

textChange(e) {
  const value = e.target.value
  this.setState({ value })
}

render() {
  return (
    <TextField value={this.state.value} onChange={this.textChange} .. />
  )
}

如果您想使用一种方法处理来自不同文本字段的更多值，请尝试以下操作：

textChange(e) {
  const id = e.target.id
  const value = e.target.value
  this.setState({ [id]: value })
}

render() {
  return (
    <TextField id="gender" value={this.state.gender} onChange={this.textChange} .. />
    <TextField id="dense" value={this.state.dense} onChange={this.textChange} .. />
  )
}

Answer 2

似乎您从父级组件获取带有道具的数据。而且，如果我觉得不错，那么问题是如何更改父组件的状态？您需要添加绑定到父级上下文的props函数，并在其中使用setState。

如何在reactjs中编辑文本字段值

2 个答案: