React、特定の文字を検出する方法はフォームフィールド内に入力されています

Question

"入力フィールド"コンポーネントがあります。 "＃"文字が入力フィールドの中に入力されている場合は、警告を表示する必要があります。何か方法はありますか、私たちは文字が入力されていることを確認することができます。

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

編集

私は、ユーザーが "＃" の文字を入力した直後に警告を見せたかったです。その後、アラートのプロンプトを表示せずに任意の文字を入力し続けることができます。ユーザーが入力フィールド内に別の「＃」と入力した場合は、アラートが再び表示されます。

ご了承ください。

Answer 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>

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

• Form in React

• React and ES6, Binding to methods of React class

Answer 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>