Warum Methode von Refs Wert erhalten sind unterschiedlich in DOM und Component?

Question

Ich war immer verwirrt von this.refs.refsName.value und this.refs.refsName.getValue() wenn Eingangswert erhalten. Hier

ist der Testcode:

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; 

Achten Sie auf die handleChange() Warum getValue Methoden unterschiedlich sind in DOM und Material-UI-Komponente?

material-ui-TextField.

Außerdem ist es Refs scheint nicht der beste Weg, um eine dom oder Komponentenelement zu bekommen, besser Praxis dom und Komponente elment zu bekommen?

Answer 1

Der beste Weg, Wert von Komponentenelement zu erhalten, ist das Ereignis für den Zugriff auf an die onChange-Handler-Funktion übergeben:

_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> 
    ); 
}