爲什麼DOM和組件中get refs的值的方法不同？

Question

當得到輸入值時，我總是被this.refs.refsName.value和this.refs.refsName.getValue()搞糊塗了。

下面是測試代碼：

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()，爲什麼的getValue方法在DOM和材料UI組件有什麼不同？

material-ui-TextField。

除此之外，似乎裁判沒有得到一個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> 
    ); 
}