javascript - React, How to detect a specific character is typed inside a form field - Stack Overflow

admin2025-04-10 1

I have an "input field" ponent. I need to show an alert, if the "#" character is typed inside the input field. Is there any way, we can determine the character is typed.

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}>
        )
    }
}

Edit

I wanted to show the alert just after the user typed a "#" character. afterward he can continue typing any character without an alert prompting. If the user type another "#" inside the input field, the alert should be appeared again.

Any idea is appreciated.

I have an "input field" ponent. I need to show an alert, if the "#" character is typed inside the input field. Is there any way, we can determine the character is typed.

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}>
        )
    }
}

Edit

Any idea is appreciated.

Share Improve this question edited Oct 29, 2016 at 15:55 asked Oct 29, 2016 at 15:29 Eranga Kapukotuwa 4,9725 gold badges26 silver badges30 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Use event.target.value to get the value and to get the latest character use e.target.value[e.target.value.length - 1] and check if has #.

Hope this helps!

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

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}>
    )
  }
}

Form in React
React and ES6, Binding to methods of React class

keyUp is suitable in this context more than keyPress & change;

Hope this helps!

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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744234777a237340.html

javascriptReact

How to detect a specific character is typed inside a form fieldStack Overflow

最新回复(0)