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

Posted 2023-02-21

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

【英文标题】：How to set an object in state from values set in textfield Material UI

【发布时间】：2019-03-21 13:29:34

【问题描述】：

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

首先，一个工作示例

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)

【参考方案1】：

@阿维纳什

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

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

【讨论】：

感谢您的回复。你的意思是，不需要改变textfield的onchange吗？

我会尝试所有组合，明天再来。谢谢

@Avinash 我的意思是保留所有内容，因为它只是替换您的 onClick 处理程序（handleChange）。换句话说，你不需要在这里追加。只需更改此行this.setState(module[name]: event.target.value)

是的！确实。我尝试了以下...都失败了 this.setState( module: [name]: event.target.value ) 和你提到的 this.setState( module[name]: event.target.value ) ….我收到语法错误，我需要在模块后加一个冒号。所以我在里面设置了 module: object 和 [name]:[value] ，但这也失败了。我现在将粘贴整个代码文件...