Javascript 使用变量作为'this.state'调用的一部分

我正在尝试使用

react bootstrap

创建表单验证，希望避免为每个输入创建验证函数

我有以下意见：

<Input 
  hasFeedback 
  type="text" 
  label="Username" 
  bsStyle={this.state.UsernameStyle} 
  onChange={this.handleChange.bind(this, 'Username')} 
  value={this.state.Username} 
  bsSize="large" 
  ref="inptUser" 
  placeholder="Enter Username"
/>

&

此时，如果我将

样式

更改为

用户名

，我也可以将此解决方案用于特定的输入。我可以做一个if语句，根据我在

style

中得到的字符串，我可以调用适当的setState，但是它们是更好的方法吗

---

谢谢

handleChange

应收集更改状态所需的所有信息，并一次性调用

setState

<代码>vaslidationState不应更改状态。它应该只是返回新的样式：

validationState(value) {
    return (value.length > 4) ? "success" : (value.length > 2) ? "warning" : "error";
}

handleChange(name, e) {
    const value = e.target.value;
    const style = this.validationState(value);
    const stateUpdates = {
        [name]: value,
        [`${name}Style`]: style
    };
    this.setState(stateUpdates);
}

相当于：

this.state.name;

this.setState({name: value)};

如果要在设置状态下使用变量，可以使用：

var value = "peter";
this.setState({[yourVariable]: value});

相当于：

this.state.name;

this.setState({name: value)};

---

哇，我认为您不应该在

validationState

函数中调用

setState

。。。它应该进行一些验证，并将结果传递回

handleChange

中的原始

setState

调用方。你现在有

setState

inception。哈哈，你用

setState

inception把我搞砸了！我在想这怎么会引起任何问题，但到目前为止似乎效果不错。不过，我要看看是否能找到更好的解决办法。我为我的经验不足提前道歉！我理解您在validationState中所做的事情，但是我在理解

const stateUpdates={[name]：value，[“${name}Style”]：Style}如何进行时遇到了困难更改已存在变量的状态，使其反映在输入上。再次为我的无知感到抱歉，谢谢你的帮助！但为什么不在这个.state[yourVariable]中使用yourVariable作为组件的值，而不将其加倍，并且要刷新组件，请使用这个.setState（{}）？
this.setState({name: value)};