React，如何检测在表单字段中输入的特定字符答案

【问题标题】：React, How to detect a specific character is typed inside a form fieldReact，如何检测在表单字段中输入的特定字符
【发布时间】：2016-10-30 03:03:26
【问题描述】：

我有一个“输入字段”组件。如果在输入字段中键入“#”字符，我需要显示警报。有什么办法，我们可以确定是输入的字符。

export default class MyComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    handleKeyPress(e) {
        // show an alert if "#" character is pressed
    }

    render() {
        return (
            <input onChange={this.handleKeyPress}>
        )
    }
}

编辑

我想在用户输入“#”字符后立即显示警报。之后，他可以继续输入任何字符而不会出现警告提示。如果用户在输入字段中键入另一个“#”，则应再次出现警报。

任何想法都值得赞赏。

【问题讨论】：

标签： javascript reactjs react-jsx jsx

【解决方案1】：

使用event.target.value 获取值并获取最新字符使用e.target.value[e.target.value.length - 1] 并检查是否有#。

希望这会有所帮助！

class DayView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    handleKeyPress(e) {
      if( e.target.value[e.target.value.length - 1] === '#' )
        setTimeout(()=> alert('Got #'), 200)
        // show an alert if "#" character is pressed
    }

    render() {
        return (
            <input onChange={this.handleKeyPress}/>
        )
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：

感谢您的评论。你的回答真的很有帮助。我在这个问题上添加了更多描述。感谢您的回答
@ErangaKapukotuwa 更新了答案。
你可以随意调整延迟时间
工作。谢谢@Pranesh
我不知道，已经通过的批准正在通过添加另一个批准来删除。第二个答案也对了一半。这就是为什么我在其中添加了我的“批准”。反正我改正了。

【解决方案2】：

export default class DayView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    // Bind `this`
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress(e) {
    // Get input value
    var value = e.target.value;
    // User has already typed a #
    var hasSymbol = !!value.substring(0, value.length - 1).match(/\#/);

    // Check if last character is a #
    if (value[value.length - 2] === '#') {
      alert('There is a # symbol');
    }

    // Check if this last character is a #
    // and the value already has one
    if (hasSymbol && value[value.length - 1] === '#') {
      alert('There is an other # symbol');
    }

    // Set state
    this.setState({ value });
  }

  render() {
    return (
      <input onChange={this.handleKeyPress} value={this.state.value}>
    )
  }
}

【讨论】：

感谢您的快速回复。它真的很有帮助。我想在用户输入“#”字符后显示警报。之后，他可以继续输入任何字符而不会出现警告提示。如果用户在输入字段中键入另一个“#”，则应该再次出现警报。

【解决方案3】：

keyUp 比keyPress & change 更适合这种情况；

希望这会有所帮助！

class DayView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
        this.handleKeyUp= this.handleKeyUp.bind(this);
    }

    handleKeyUp(e) {
     
       this.refs.atom.value.endsWith('#')  && setTimeout(()=> alert('Got #'), 200) // show an alert if "#" character is pressed
    }

    render() {
        return (
            <input ref="atom" onKeyUp={this.handleKeyUp}/>
        )
    }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：