मेरे पास एक सरणी है कि मैं उपयोगकर्ता के इनपुट से एक नया नाम जोड़ना चाहता हूं। मेरे घटक में मेरे पास है:

<div>
  <h4>Add A Player</h4>
  <input
    type="text"
    placeholder="Enter a new name"
    value={this.state.newPlayerName}
  />
  <button onClick={this.handleAddPlayer}>
     Press to Add Player
  </button>
</div>

जो नाम को छोड़कर इस फ़ंक्शन के साथ काम करता है:

handleAddPlayer = e => {
  const players = this.state.players.slice(0);
  players.push({
    name: '',
    id: getRandomInt(20, 55)
  });
  this.setState({
    players: players,
    newPlayerName: e.target.value
  });
};

मैं प्राप्त करने की कोशिश कर रहा हूं जब कोई उपयोगकर्ता नाम इनपुट करता है और इसे सबमिट करता है, यह उस फ़ंक्शन में अपडेट होता है जो सरणी को अपडेट करता है (यदि यह समझ में आता है, क्षमा करें क्योंकि यह अभी भी मेरे लिए बहुत नया है)।

मेरे राज्य में मेरे पास है:

this.state = {
  id: players.id,
  totalScore: 0,
  countInfo: [],
  evilName: '',
  color: '#6E68C5',
  scoreColor: '#74D8FF',
  fontAwe: 'score-icon',
  incrementcolor: '',
  scoreNameColor: 'white',
  glow: '',
  buttonStyle: 'count-button-start',
  newPlayerName: '',
  players
};

मुझे यकीन नहीं है कि नाम (या स्ट्रिंग) को सरणी में पास करने के लिए इनपुट कैसे प्राप्त करें, क्या कोई मदद कर सकता है?

0
sthig 9 जुलाई 2017, 07:20

1 उत्तर

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

सबसे पहले, आपने गलत तत्व में बाउंड इनपुट-अपडेटिंग हैंडलर जोड़ा! आपके पास वर्तमान में यह एक बटन से जुड़ा हुआ है, आपको इसे इनपुट से जोड़ना होगा! हर बार जब आप इनपुट बदलते हैं तो मूल्य को अपडेट करने के लिए अपने इनपुट में एक onChange हैंडलर जोड़ें:

<input
  type="text"
  placeholder="Enter a new name"
  value={this.state.newPlayerName}
  onChange={this.handleChange}
/>

फिर एक नई विधि बनाएं जो परिवर्तन को संभालती है:

handleChange = e => {
  this.setState({
    newPlayerName: e.target.value
  });
}

यह प्रतिक्रिया को इनपुट को नियंत्रित करने देगा, और इनपुट मान को राज्य में सेट करेगा ताकि आप एक नया खिलाड़ी जोड़ते समय इसका उपयोग कर सकें। फिर, क्लिक पर एक नया प्लेयर जोड़ने के लिए हैंडलर सेट करें। स्लाइसिंग, पुश करने, रीसेट करने के बजाय, केवल सरणी स्प्रेड सिंटैक्स का उपयोग करें:

handleAddPlayer = e => {
  this.setState(prevState => ({
    players: [...prevState.players, {
      name: this.state.newPlayerName
      id: getRandomInt(20, 55)
    }]
  }));
}

यह players को पिछले राज्य की players संपत्ति प्लस के साथ नए प्लेयर ऑब्जेक्ट पर name के साथ सेट करेगा जो कि इनपुट का मान और एक यादृच्छिक id है।

1
Andrew Li 9 जुलाई 2017, 07:43