ich nicht Textfeld in Material-UI

Question

Ich entwickelte eine Reaktion App mit Material UI dann habe ich versucht unabhängige Komponenten bearbeiten können,

Prüfung die folgenden unabhängigen Komponenten (<PanelDiv/>),

render() { 
     return (
      <div className="panelDiv-component" style={{display:this.props.display}}> 
       <div className="panel-field-content"> 
        <TextField 
         floatingLabelText={this.props.heading} 
         type={this.props.inputType} 
         value={this.props.value} 
        /> 
        {/* <input defaultValue className="form-control"></input>*/} 
       </div> 
      </div> 
     ); 
    } 

zu erstellen

ich habe versucht, die Komponente so zu verwenden,

<PanelDiv 
    heading='name' 
    inputType="text" 
    value={this.state.userData.name} 
    display={this.state.display[0]} 
/> 

Aber ich kann nicht Eingabefeld aktualisieren in dieser way.Also nicht da ist Error. Wie kann ich das lösen? Ich möchte mein Eingabefeld aktualisieren.

Bitte überprüfen Sie meine Eingabe in der unten stehenden Bild abgelegt:

Answer 1

Da Sie den Wert von TextField- unter Verwendung value Attribute steuern, aber Sie aktualisieren den Wert unter Verwendung onChange Funktion, Da Wert TextField ändert sich nicht, daher wird es schreibgeschützt.

Lösung:

Geben Sie die onChange Funktion mit TextField- und aktualisieren Sie den Wert in die, wie folgt aus:

<TextField 
    floatingLabelText={this.props.heading} 
    type={this.props.inputType} 
    value={this.props.value} 
    onChnage={this.props._change} 
/> 

Innen-Stammkomponente:

_Change(event, value){ 
    //update the value here 
} 


<PanelDiv 
    heading='name' 
    inputType="text" 
    value={this.state.userData.name} 
    _change={this._change} 
    display={this.state.display[0]} 
/> 

Answer 2

Schauen Sie sich das Beispiel - https://jsfiddle.net/y857yeLq/

Sie sollten eine Funktion definieren, bei der es sich um eine Textänderung handelt, und diese an die Eigenschaft onChange übergeben. In diesem Beispiel habe ich den Zustand verwendet, um den aktuellen Textfeldwert zu speichern. Ich sehe, dass Sie Requisiten dafür verwenden, aber das Prinzip ist das gleiche - Funktion sollte Requisiten in Ihrem Fall aktualisieren.

const { TextField, MuiThemeProvider, getMuiTheme } = MaterialUI; 

class SliderExampleControlled extends React.Component { 

    state = { 
    value: '', 
    } 

    render() { 
    console.log(this.state); 
    return (
     <div style={{width: '50%', margin: '0 auto'}}> 
     <TextField 
      hintText="Type here" 
      value={this.state.value} 
      onChange={(e) => this.setState(e.target.value)} 
     /> 
     </div> 
    ); 
    } 

} 

const App =() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <SliderExampleControlled /> 
    </MuiThemeProvider> 
); 

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