ReactJs輸入字段的打印值

Iam試圖立即在渲染函數中打印我的輸入值。但現在我正在看這個鏈接：https://facebook.github.io/react/docs/state-and-lifecycle.html ReactJs輸入字段的打印值

在這裏，他們使用超級（道具）和設置狀態的構造函數。

但是當我試試這個：

class App extends React.Component { 
    constructor(props) { 
    super(props); 

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

    handleChange(event) { 
    this.setState({ text: event.target.value }); 
    }; 

    render() { 
    return (
     <div> 
     <h1>Hello, world!</h1> 
     <h2>It is {this.state.text}.</h2> 

     <input type="text" onKeyUp={this.handleChange} /> 
     </div> 
    ); 
    } 
}

它拋出我這個錯誤： Uncaught TypeError: Cannot read property 'state' of undefined

我該如何解決這個問題。

來源

2016-10-24 Sreinieren

this.handleChange = this.handleChange.bind（本）在構造 –

當你調用這樣的函數時，它被窗口調用，而不是你的反應對象。

爲了使功能被綁定到你的反應物（和必須使用的setState方法的能力，你需要使用這樣的：

onKeyUp={this.handleChange.bind(this)}

this將其綁定到你的反應對象:)

來源

2016-10-24 17:27:49

什麼@Burak在你對在構造函數中結合它的問題評論說，也是一個很好的建議，特別是如果你將使用在您網頁上的任如果你已經在構造函數中綁定了它，那麼你可以簡單地在頁面的任何其他地方調用'this.handleChange'。 –

你必須綁定this到您的事件處理程序是這樣的：

<input type="text" onKeyUp={this.handleChange.bind(this)} />

w ^實例工作會有：https://codepen.io/shanedaugherty/pen/ALwAzL

來源

2016-10-24 17:33:40 ShaneDaugherty

ReactJs輸入字段的打印值

回答

相關問題