Является ли атрибут значения входного тега частью DOM?

Question

У меня есть какое-то значение по умолчанию, которое должно быть передано атрибуту value ввода, так что это будет контролируемый компонент. Что мне нужно знать, где я должен инициализировать состояние, в constructor введите код или componentDidMount? Я считаю, что componentDidMount - правильное место для инициализации, которая требует DOM-узлов. Вот почему я спрашиваю об атрибуте значения.

Answer 1

как вы сказали componentDidMount - правильное место для инициализации , но точно для требования, которое требует измерений узла DOM, таких как ширина или высота в браузере послерендер (здесь вы можете использовать ширину элемента для некоторых целей).

, поэтому в вашем случае (я имею в виду input ) нет необходимости устанавливать значение в 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' />