Question

我有一个＆＃34;输入字段＆＃34;零件。我需要显示警告，如果＆＃34;＃＆＃34;字符在输入字段内输入。有什么办法，我们可以确定字符是打字的。

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

修改

我想在用户输入＆＃34;＃＆＃34;之后立即显示警报。字符。之后，他可以继续键入任何字符，而无需提示警告。如果用户键入另一个＆＃34;＃＆＃34;在输入字段内，应再次出现警报。

任何想法都表示赞赏。

Answer 1

dbpath=/data/dbroot

Answer 2

使用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>

Answer 3

keyUp在此背景下适用于keyPress＆amp; 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>

React，如何检测特定字符是在表单字段中键入的

3 个答案: