ヌルのプロパティ 'value'を読み取れませんか？

Question

this.username.valueを使用しようとするとエラーが発生します。私はラベルに表示するテキストボックスの価値を得たいです。私は反応する初心者です。テキストボックスから変数に値を取得し、InputRefを使用してラベルに表示する方法

​​

Answer 1

あなたの質問にはいくつかの間違いがあります。次のコードを理解しようとすると、あなたはあなたの例に適用することができるようになります：

class Test extends React.Component { 
 
    
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     value: "", 
 
     username: "" 
 
    } 
 
    } 
 

 
    handleChange(e){ 
 
    this.setState({value: e.target.value}) 
 
    } 
 

 
    handleClick(){ 
 
    this.setState({username: this.state.value}) 
 
    } 
 

 
    render(){ 
 
    return (
 
     <div> 
 
     <label>{this.state.username}</label><br /> 
 
     <input value={this.state.value} onChange={this.handleChange.bind(this)}></input><br /> 
 
     <button onClick={this.handleClick.bind(this)}>Login</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<Test />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='container'/>

Here is the fiddle.