ユーザー入力が何かに反応したときのカスタム入力状態構造の設定j

Question

私はReact jsを初めて使っています。ユーザーが単語を入力してスペースバーを押すと、新しい単語として配列に格納され、入力ボックスを右

コード

state = { 

     showThisValue:"", 
     storeValue:[] // ["Walk","on","th"] 

    }; 


    handleInput = e => { 

     /* Store the value I have no Idea how to do this */ 

     if(e.target.value === " "){ 




     }else { 

         let updatedValue = this.state.storeValue.length === 0 ? this.state.storeValue.concat(e.target.value) : this.state.storeValue.slice(this.state.storeValue.length - 1).concat(this.state.storeValue[this.state.storeValue.length - 1].concat(e.target.value)) 

    this.setState({ 
      storeValue:updatedValue 
    }) 


     } 



    }; 

ロジック

let updatedValue = this.state.storeValue.length === 0 ? this.state.storeValue.concat(e.target.value) : this.state.storeValue.slice(this.state.storeValue.length - 1).concat(this.state.storeValue[this.state.storeValue.length - 1].concat(e.target.value)) 

しかし、上記のコードは何かリクを返します。..クリアされますeこのように個別の手紙のように

["w","a","l","k"] 

Answer 1

希望はあなたが望んだことです！

var input = document.querySelector('input'); 
 
var p = document.querySelector('p'); 
 
var content = p.innerText.split(' '); 
 
var editIndex = 0; 
 
var text = ''; 
 

 
input.addEventListener('keydown', function(e){ 
 
    if(e.which === 8){ // Backspace 
 
     text = text.slice(0, text.length - 1); // delete 1 character. 
 
    }else if(e.which === 32){ // Spacebar 
 
     changeText(); 
 
    }else{ 
 
     text += e.key; 
 
    } 
 
    console.log(text); console.log(e.which); 
 
}); 
 

 
function changeText(){ 
 
    content[editIndex] = text; 
 
    p.innerText = content.join(' '); 
 
    
 
    editIndex++; 
 
    text = ''; 
 
    input.value = ''; 
 
}

<p> 
 
    My name is Apple. 
 
</p> 
 
<input placeholder="type words"/>