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

Question

I have some default value, that should be passed to value attribute of input, so this will be controlled component. What I need to know, where I should initialize state, in constructor enter code here or componentDidMount ? I find, that componentDidMount is the right place for initialization that requires DOM nodes. So that's why I ask about value attribute.

Answer 1

as you said componentDidMount is the right place for initialization but exactly for the requirement that needs DOM node's measurements like width or height in browser after render (here you can use element's width for some purpose).

so in your case (i mean input ), there is no need to set value in componentDidMount .

hence you can simply use constructor that's enough.

Hope this helps.

Answer 2

Use ref to get value of <input/> , update state and initialize this.inputRef.current.value . This is working solution of question,

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