小编eka*_*rni的帖子

在this.state调用ReactJS中使用变量

我正在尝试使用创建表单验证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"
/>
Run Code Online (Sandbox Code Playgroud)

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

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

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};
}
Run Code Online (Sandbox Code Playgroud)

在这一点上,如果我更改style为,Username我也可以使该解决方案也适用于该特定输入。我可以做一个if语句,根据输入的字符串,style我可以调用适当的setState,但是这样做是更好的方法吗?

谢谢!

javascript reactjs react-bootstrap

3
推荐指数
2
解决办法
3063
查看次数

标签 统计

javascript ×1

react-bootstrap ×1

reactjs ×1