マテリアライズCssのテキストフィールドがフリーズする

Question

私は反応でマテリアライズCSSを使用しています。値がテキストフィールドに示されているが、私はフィールドを編集することはできません

<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> 

：私はこのような単純なテキストフィールドを実装しています。その値で凍ってしまったばかりです。私も使用しましたMaterialize.updateTextFields（）; in componentDidMount（）。しかし、それは動作しませんでした。どんな助け？

Answer 1

入力の値は状態に依存するため、状態を変更して入力値を変更できるように、onChangeハンドラも配置する必要があります。

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>

UPDATE

私は多くの入力を持っている場合はどう？私は入力を格納するために配列を使用します。入力の順序が重要であることに注意してください。

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>