Matérialiser les champs de texte Css sont gelés

Question

J'utilise materialize css dans reagir. Je l'ai mis en place un champ de texte simple comme ceci:

<div class="input-field col s6"> 
    <input placeholder="Placeholder" id="first_name" type="text" class="validate" value={this.state.name}> 
    <label for="first_name">First Name</label> 
</div> 

La valeur est affichée dans le champ de texte, mais je ne peux pas modifier le champ. Il vient d'être gelé avec cette valeur. J'ai également utilisé Materialize.updateTextFields(); dans componentDidMount(). Mais cela n'a pas fonctionné. De l'aide ?

Answer 1

Étant donné que la valeur de votre entrée dépend de l'état, vous devez également définir un gestionnaire onChange afin de pouvoir modifier la valeur d'entrée en modifiant l'état.

class SimpleInput extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     value: 'walawe' 
 
    } 
 
    } 
 
    
 
    onChangeValue = (value) => { 
 
    this.setState({ 
 
     value, 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    return <input type="text" value={this.state.value} onChange={(e) => this.onChangeValue(e.target.value)}/> 
 
    } 
 
} 
 

 
ReactDOM.render(<SimpleInput />, document.getElementById('app'))

<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="app"></div>

MISE À JOUR

si j'ai beaucoup entrées? J'utiliserais array pour stocker l'entrée. Notez que l'ordre des entrées est important.

class SimpleInput extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     values: ['why', 'are', 'you', 'so', 'serious', 'about', 'it', 'all', 'the', 'way'] 
 
    } 
 
    } 
 
    
 
    onChangeValue = (value, i) => { 
 
    this.setState((prevState) => { 
 
     const newValues = prevState.values; 
 
     newValues[i] = value; 
 
     return { 
 
     values: newValues, 
 
     }; 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    console.log(this.state.values); 
 
    const inputs = this.state.values.map((val, i) => <div><input type="text" value={val} onChange={(e) => this.onChangeValue(e.target.value, i)}/></div>) 
 
    return (<div> 
 
     {inputs} 
 
    </div>) 
 
    } 
 
} 
 

 
ReactDOM.render(<SimpleInput />, document.getElementById('app'))

div { 
 
    margin: 10px 0 0 0; 
 
}

<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="app"></div>