Question

我有一些默认值，应该将其传递给输入的value属性，因此这将是受控组件。我需要知道的是，应该在constructor或componentDidMount中输入代码来初始化状态？我发现componentDidMount是需要DOM节点进行初始化的正确位置。这就是为什么我问值属性的原因。

Answer 1

正如您所说的componentDidMount是进行初始化的正确位置，但恰好满足需要DOM节点尺寸（例如 width 或 height ）的要求strong>在渲染后在浏览器中显示（此处您可以出于某些目的使用元素的宽度）。

因此，在您的情况下（我的意思是输入），无需在componentDidMount中设置值。

因此，您只需使用构造函数即可。

希望这会有所帮助。

Answer 2

使用ref来获取<input/>的值，更新state并初始化this.inputRef.current.value。这是问题的可行解决方案，

class App extends React.Component{
  constructor(props){
   super(props);
   this.inputRef = React.createRef();
   this.state = {
     inputValue: 'This is App component'
   }
  }
  componentDidMount(){
   this.inputRef.current.value = this.state.inputValue;
  }
  keypressHandler = (event) => {
    if(event.key === 'Enter')
     this.setState({inputValue: this.inputRef.current.value});      
  }
  render() {
    return (
      <div>
       <label>Type text and press enter</label><br/>
       <input type='text' ref={this.inputRef} onKeyPress={(event) => this.keypressHandler(event)}/>       
       <p>{this.state.inputValue}</p>
      </div>
    );
  }	
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

输入标签的value属性是DOM的一部分吗？

2 个答案: