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

该值显示在文本字段中，但我无法编辑该字段。它刚刚被这个价值冻结了。我还在 componentDidMount() 中使用了 Materialize.updateTextFields();。但它没有用。有什么帮助吗？

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>

更新

如果我有很多输入怎么办？我会使用数组来存储输入。请注意输入的顺序很重要。

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>