Question

我试图阻止用户以输入形式输入数字，但保留字母字符。此刻，只要用户输入数字，我的代码就会删除之前输入的所有内容，例如“ Ann3”变成“”。用户不小心按下“ 3”时，我不知道如何保留“ Ann”。这是到目前为止我得到的：

    updateName(event) {
    var value = event.target.value;
    var model = this.state;
    if (!value.match("^[a-zA-Z]*$")) {
        value = "";
    };
    this.setState({ [event.target.name]: value })

我想知道我是否可以在此处使用串联，对不起，我是ReactJS和程序设计的新手，并且不知道从哪里开始。

Answer 1

除了将value设置为空字符串，您还可以使用.replace用空字符串替换所有非字母字符（从而保留字母字符及其相对位置）：

updateName(event) {
  const { value, name } = event.target;
  this.setState({ [name]: value.replace(/[^a-z]/gi, '') });
}

Answer 2

我做了一个带有响应bootstrap的代码示例，但是我确定它会为您工作：

  let { FormGroup,ControlLabel,FormControl } = ReactBootstrap;

  class Example extends React.Component {
    constructor(props, context) {
      super(props, context);

      this.handleChange = this.handleChange.bind(this);

      this.state = {
        value: ''
      };
    }

    getValidationState() {
      const length = this.state.value.length;

      if (length > 3) return 'success';
      else if (length > 2) return 'warning';
      else if (length > 0) return 'error';
      return null;
    }

    handleChange(e) {
      this.setState({value : e.target.value.replace(/[^a-z]/gi, '')})
    }

    render() {
      return (
        <form>
          <FormGroup
            controlId="formBasicText"
            validationState={this.getValidationState()}
          >
            <ControlLabel>keep alphabetical characters</ControlLabel>
            <FormControl
              type="text"
              value={this.state.value}
              placeholder="Enter text"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
          </FormGroup>
        </form>
      );
    }
  }

  ReactDOM.render(
    <Example />, 
    document.getElementById('app')
  );

https://codepen.io/ene_salinas/pen/zmMyOb?editors=0010

编码愉快！

阻止用户输入数字，但保留他们已经输入的字母字符

2 个答案: