Question

我正在使用materialize 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处理程序，以便可以通过修改状态来更改输入值。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

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

＆＃13;

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

＆＃13;

div {
  margin: 10px 0 0 0;
}

＆＃13;

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

＆＃13;

Materialise Css文本字段变为冻结状态

1 个答案: