时间戳

首页 > 解决方案 > 如何动态设置名称？

reactjs - 如何动态设置名称？

问题描述

我正在尝试验证每个输入字段。假设我有 5 个输入字段，如何为每个输入字段设置“错误”状态。例如 this.setState({error['roleShortName'] : true })，这不起作用，在输入中，invalid={this.state.error["roleShortName"]}。

<FormGroup row>
      <Label for="roleshortname" sm={4}>roleshortname</Label>
            <Col sm={8}>
                 <Input invalid={this.state.error}
                      autoComplete='off'
                      onChange={this.handleChange}
                      type="text"
                      value={this.state.roleShortName}
                      name="roleShortName"
                      />
             </Col>
</FormGroup>

<FormGroup row>
     <Label for="rolefullname" sm={4}>rolefullname</Label>
            <Col sm={8}>
                  <Input invalid={this.state.error}
                   autoComplete='off'
                   onChange={this.handleChange}
                   type="text"
                   value={this.state.roleName}
                   name="roleName"
              </Col>
</FormGroup>
<Button onClick={() => this.handleAddConfirm()}

handleAddConfirm() {

        if (!this.state.roleShortName) {
            this.setState({ error: true })
            return
        }
        else if (!this.state.roleName) {
            this.setState({error: true})
            return
        }

标签： reactjsreactstrap

解决方案

this.setState({error['roleShortName']: true})不会工作。如果您希望密钥是动态的，它应该如下所示：

this.setState({[error['roleShortName']]: true})

注意[]周围的键名。

编辑：我认为您正在寻找一个字典来保存每个输入的错误：

handleAddConfirm() {
        var newErrors = {...this.state.errors}
        if (!this.state.roleShortName) {
            newErrors["roleShortName"] = true
        }
        else if (!this.state.roleName) {
            newErrors["roleName"] = true
        }
        this.setState({ errors: newErrors })
        return
}

在你的构造函数中，你应该有

this.state = {errors: {}}

推荐阅读