get refs 값의 메소드가 DOM과 Component에서 다른 이유는 무엇입니까?

Question

입력 값을 받았을 때 나는 항상 this.refs.refsName.value과 this.refs.refsName.getValue()으로 혼란스러워했다. 왜 getValue 방법 DOM 및 재료 UI 구성 요소에서 다른

import React from 'react'; 
import TextField from 'material-ui/TextField'; 
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 

class TestRef extends React.Component { 
constructor() { 
    super(); 
    this.handleChange = this.handleChange.bind(this); 
} 

handleChange() { 
    console.log(this.refs.myInput.value); // correct 
    console.log(this.refs.myInput.getValue()); //wrong 
    console.log(this.refs.textFieldInput.value);//undefined 
    console.log(this.refs.textFieldInput.getValue()); //correct 
} 

render() { 
    return (<div> 
      <input type="text" ref="myInput" onChange={this.handleChange}/> 
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
       <TextField id='1111' ref="textFieldInput" onChange={this.handleChange}/> 
      </MuiThemeProvider> 
     </div> 
    ); 
} 
} 

export default TestRef; 

에주의 handleChange()에 : 여기

는 테스트 코드인가?

.

게다가,이 DOM 또는 구성 요소 요소를 얻을 수있는 가장 좋은 방법은 심판을하지 않는 것, 더 좋은 방법은 DOM 및 구성 요소 elment를 얻을 수 있습니까?

Answer 1

요소 요소에서 값을 얻을 수있는 가장 좋은 방법은 이벤트에 액세스하는 것입니다 onChange 핸들러 함수에 전달 :

_onChange = (e) => { 
    console.log(e.target.value) 
} 

render() { 
    return (<div> 
      <input type="text" ref="myInput" onChange {this.handleChange}/> 
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}> 
       <TextField id='1111' ref="textFieldInput" onChange={this._onChange}/> 
      </MuiThemeProvider> 
     </div> 
    ); 
}