如何动态设置状态名称？

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})

注意键名周围的[]。

Answer 2

这是一些常规信息，只要您的输入字段具有名称属性。

最好从模糊event中拾取名称，并为其设置错误值。

[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 } )