एंटर कुंजी क्लिक होने के बाद मैं टेक्स्ट बॉक्स में मान कैप्चर करने का प्रयास कर रहा हूं। मैं आमतौर पर ऑन चेंज का उपयोग करता हूं लेकिन यह वह नहीं है जिसे मैं ढूंढ रहा हूं। नीचे दिए गए मेरे कोड में, मैं केडाउन पर उपयोग करने का प्रयास कर रहा हूं लेकिन जब मैं टेक्स्टबॉक्स में टाइप करने का प्रयास करता हूं, तो कुछ भी नहीं होता है। यहाँ मेरा कोड है:

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      name:'',
      show:false
    }
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }
  
  handleKeyDown(e) {
    if (e.key === 'Enter') {
      this.setState({
        name:e.target.value
      })
    }
  }
  
  render(){
    return(
      <div>
        <span>What is your name? </span>
        <input type="text" name="fullName" value={this.state.name} onKeyDown={this.handleKeyDown} /> 
        {this.state.show && <div>Hello {this.state.name}</div>}
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
) 

यह रहा मेरा कोडपेन कोई भी सहायताकाफी प्रशंसनीय होगी। धन्यवाद!

0
OLA 9 नवम्बर 2020, 18:24

1 उत्तर

सबसे बढ़िया उत्तर

इनपुट बदलने पर आपको स्थिति को अपडेट करना होगा, और फिर एंटर कुंजी दबाए जाने पर मान के साथ कुछ करना होगा।

class App extends React.Component{
  constructor(){
    super()
    this.state = {
      name: '',
      show:false
    }
    this.handleKeyDown = this.handleKeyDown.bind(this)
  }
  
  handleKeyDown(e) {
    if (e.key === 'Enter') {
      alert(this.state.name)
    }
  }
  
  render(){
    return(
      <div>
        <span>What is your name? </span>
        <input type="text" name="fullName" onChange={e=>this.setState({ name: e.target.value })} value={this.state.name} onKeyDown={this.handleKeyDown} /> 
        {this.state.show && <div>Hello {this.state.name}</div>}
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
) 
2
Porlune 9 नवम्बर 2020, 15:29