獲取文本從文本框反應JS

Question

我試圖讓輸入了使用ReactJS一個文本框，但我不知道如何

import React from 'react' 

class component extends React.Component { 
    constructor() { 
      super() 
      this.state = { 
      word: String('') 

    } 
    } 

increment() { 
    this.setState({ 
    word: this.state.word += '' 
}) 
} 

render() { 
    return (
     <div> 
      <p>The message is: { this.state.word } </p> 
      <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} /> 
      <input type="submit" value="Add Word" onClick={() => this.increment()} /> 
      {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/} 
     </div> 

) 
} 
} 

從文本框中的文本應添加到的消息是：

Answer 1

需要兩個state變量，一個將存儲textfield當前值，而另一個WIL升存儲完整的價值，裏面increment方法追加textfield值完成值並再次將其設置爲「」，試試這個：

class HelloWidget extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      word: '', 
      new: '', 
     }; 
    } 

    increment() { 
     this.setState({ 
      word: this.state.word + this.state.new, 
      new: '', 
     }) 
    } 

    handleChange(value) { 
     this.setState({ 
      new: value 
     }); 
    } 

    render() { 
     return (
      <div> 
       <p>The message is: { this.state.word } </p> 
       <input type="text" value={this.state.new} onChange={(e) =>this.handleChange(e.target.value)} /> 
       <input type="submit" value="Add Word" onClick={() => this.increment()} /> 
      </div> 
     ); 
    } 
} 

檢查jsfiddle的工作比如：https://jsfiddle.net/hse607rr/

Answer 2

您需要添加handleChange方法：

class component extends React.Component { 
    constructor() { 
     super() 

     this.state = { 
      word: '' 
     }; 
    } 

    increment() { 
     this.setState({ 
      word: this.state.word + '' 
     }) 
    } 

    handleChange(value) { 
     this.setState({ 
      word: value 
     }); 
    } 

    render() { 
     return (
      <div> 
       <p>The message is: { this.state.word } </p> 
       <input type="text" value={this.state.word} onChange={(event) =>this.handleChange(event.target.value)} /> 
       <input type="submit" value="Add Word" onClick={() => this.increment()} /> 
       {/*<p><input type="button" value="clear msg" onClick={() => this.eraseWord()} /></p>*/} 
      </div> 
     ); 
    } 
}