如何根据文本字段 Material UI 中设置的值将对象设置为状态

Question

我尝试了很多来找到答案，但都失败了。请帮帮我。

首先，一个工作示例

this.state = {
module:'',
description: '',
status: '',
redirectToModule: false,
error: ''
}
-----------------
  handleChange = name => event => {
    this.setState({[name]: event.target.value})
  }

 Render section has        
 <TextField id="name" label="Module Name" className={classes.textField} value={this.state.module} onChange={this.handleChange('module')} margin="normal"/><br/>
      <TextField id="description" type="text" label="Description" className={classes.textField} value={this.state.description} onChange={this.handleChange('description')} margin="normal"/><br/>
      <TextField id="status" type="text" label="Status" className={classes.textField} value={this.state.status} onChange={this.handleChange('status')} margin="normal"/>

以上工作成功。

但是，我需要像这样设置状态对象

this.state = {
  module: {
      module: '',
      description: '',
      status: ''
    },
  redirectToModule: false,
  error: ''
}

我想我应该在 onChange={this.handleChange('')} 中提到例如 'module.status' 而不是 'module' 但是

我应该改变函数handleChange，像这样吗？

this.setState({module.[name]: event.target.value});

正确的方法应该是什么...？

请帮助我。我对反应很陌生，但我在短时间内掌握了很多。老实说，我还是个新手。

整个文件如下...没有导入和样式部分

class EditModule extends Component {
  constructor({match}) {
    super();
    // this.state = {
    //       module: '',
    //       description: '',
    //       status: '',
    //       roles:[],
    //   redirectToModule: false,
    //   error: ''
    // }
    this.state = {
      module: {
        module: '',
        description: '',
        status: '',
        roles:[]
      },
      redirectToModule: false,
      error: ''
    }
    this.match = match
  }

  componentDidMount = () => {
    read({
      moduleId: this.match.params.moduleId
    }).then((data) => {
      if (data.error) {
        this.setState({error: data.error});
      } else {
        this.setState({ 
          module: {
            module: data.module, 
            description: data.description,
            status: data.status,
            roles: data.roles
          }
        });
      }
    })
  };

  clickSubmit = () => {
    const module = {
      module: this.state.module || undefined,
      description: this.state.description || undefined,
      status: this.state.status || undefined,
      roles: this.state.roles || undefined
    }
    update({moduleId: this.match.params.moduleId}, module)
      .then((data) => {
        if (data.error) {
          this.setState({error: data.error})
        } else {
          this.setState({'moduleId': data._id, 'redirectToModule': true});
        }
      }
    );
  };

  handleChange = name => event => {
    this.setState( { module: JSON.stringify( { [name]: event.target.value } )  } )
  };

  render() {
    const {classes} = this.props
    if (this.state.redirectToModule) {
      return (<Redirect to={'/module/' + this.state.moduleId}/>)
    }
    return (
      <Card className={classes.card}>
        <CardContent>
          <Typography type="headline" component="h2" className={classes.title}>
            Edit Module
          </Typography>
          <TextField id="name" label="Module Name" className={classes.textField} value={this.state.module.module} onChange={this.handleChange('module')} margin="normal"/><br/>
          <TextField id="description" type="text" label="Description" className={classes.textField} value={this.state.module.description} onChange={this.handleChange('description')} margin="normal"/><br/>
          <TextField id="status" type="text" label="Status" className={classes.textField} value={this.state.module.status} onChange={this.handleChange('status')} margin="normal"/>
          <br/> {
            this.state.error && (<Typography component="p" color="error">
              <Icon color="error" className={classes.error}>error</Icon>
              {this.state.error}
            </Typography>)
          }
        </CardContent>
        <CardActions>
          <Button color="primary" variant="raised" onClick={this.clickSubmit} className={classes.submit}>Submit</Button>
        </CardActions>
      </Card>
    )
  }
}

EditModule.propTypes = {
  classes: PropTypes.object.isRequired
}

export default withStyles(styles)(EditModule)

Answer 1

@阿维纳什

请像这样更改您的 handleChange 函数。

handleChange = name => event => {
    this.setState({module[name]: event.target.value})
}