Question

我正在尝试使用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"
/>

另外，我有两个函数来处理状态的验证和更新：

handleChange: function(name, e) {
  var state = {};
  state[name] = e.target.value;
  this.setState(state);
  var namestyle  = name + 'Style';
  this.setState(this.validationState(namestyle, e));
},

＆安培;

validationState: function(style, event) {
  var length = event.target.value.length;

  if (length > 4) this.setState({style: 'success'});
  else if (length > 2) this.setState({style: 'warning'});

  return {style};
}

此时如果我将style更改为Username，我也可以使此解决方案适用于该特定输入。我可以创建一个if语句，并根据我在style中得到的字符串，我可以调用相应的setState，但是他们是更好的方法吗？

谢谢！

Answer 1

var yourVariable = "name";
this.state[yourVariable];

等同于：

this.state.name;

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

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

等同于：

this.setState({name: value)};

Answer 2

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`的一部分调用ReactJS

2 个答案: