如何使用名称动态设置状态？

Question

我正在尝试验证每个输入字段。假设我有 5 个输入字段，如何为每个输入字段设置 'error' 状态。例如，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
        }

Answer 1

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: {}}

Answer 2

如果您的输入字段具有名称属性，这里有一些通用的东西。

您从 preferred blur event 中选取名称并为其设置错误值。

[e.target.name] = [e.target.value]

在您的情况下，在错误对象中只需设置名称属性和值，如下所示

// check for error on `e.target.name` field and if true

this.setState({ error[e.target.name]: true } )

Answer 3

在构造函数中初始化一个对象，该对象将保存每个输入字段的错误状态。

constructor(props) {
 super(props);
 this.state = {
   errorFields: {}
 }
}

<Input invalid={this.state.errorFields.roleShortName}
       autoComplete='off'
       onChange={this.handleChange}
       type="text"
       value={this.state.roleShortName}
       name="roleShortName"
/>


    handleChange(e) {
      const { name, value } = e.target;
      let errorFields = this.state.errorFields;
      errorFields[name] = false;
      if (!value) {
        errorFields[name] = true;    
      }
      this.setState({
       errorFields,
       [name]: value
      });
    }

然后在handleAddConfirm函数中。

handleAddConfirm(e) {
   let indexOfInvalidState Object.values(this.state.errorFields).indexOf(true);
   if (indexOfInvalidState > -1) {
      return false;
   }
}

如何使用名称动态设置状态？

How to setState with name dynamically?

reactjs

reactstrap