Question

我正在尝试验证每个输入字段。假设我有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
        }

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

如果您的输入字段具有name属性，这是常规内容。

您最好从模糊event中选取名称，然后为其设置error值。

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

以您为例，在错误对象中只需设置name属性和值即可

// 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;
   }
}

如何动态设置名称名称？

3 个答案: