javascript - 当用户输入 React js 时如何设置自定义输入状态结构

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

但是上面的代码将返回类似这样的内容，例如单个字母

["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"/>