Я пытаюсь следовать простой модели представления, то есть у нее нет состояния.

Проблема заключается в том, что если я использую тег Input или другой элемент управления формы, единственный способ для этого компонента обновить себя — это использовать состояние — это правильно?

Это означает, что любой компонент, имеющий только 1 входной тег, будет вынужден быть компонентом с сохранением состояния, а не без сохранения состояния — просто из-за того, как реагирует работа и получая тег ввода для обновления, пока пользователь печатает.

Есть ли альтернатива?

Хотя я использую хуки, которые являются более чистыми и позволяют мне использовать функциональный компонент с помощью «useState» — это все еще будет с состоянием.

Теперь, когда появились крючки — мы говорим, что все функциональные компоненты могут сохранять состояние? Это не кажется правильным.

Или это просто тот случай, когда из-за того, как реагирует работает, любой компонент, имеющий тег ввода, автоматически становится компонентом с состоянием?

Конечно, я мог бы передать значения по умолчанию через реквизиты и передать значения в более высокий компонент (мой реальный компонент с состоянием) — но это похоже на долгий путь.

Я надеялся получить некоторое представление о том, каким должен быть способ достижения компонента без состояния, который имеет входной тег — или мы всегда должны передавать значения обратно родительскому компоненту, или его понятный побочный эффект заключается в том, что когда компонент имеет входной тег, мы будет хранить минимальное состояние (используя useState, например, в хуках)

Есть идеи ?

Используйте неконтролируемые компоненты

class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.input = React.createRef(); } handleSubmit(event) { alert('A name was submitted: '   this.input.current.value); event.preventDefault(); } render() { return ( {amp}lt;form onSubmit={this.handleSubmit}{amp}gt; {amp}lt;label{amp}gt; Name: {amp}lt;input type="text" ref={this.input} /{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;input type="submit" value="Submit" /{amp}gt; {amp}lt;/form{amp}gt; ); } } 

Они используют ссылки для получения текущего значения ввода, а не для поддержания его состояния.

Вместо того, чтобы управлять этим вводом в компоненте, вы должны передать ему обратный вызов, например. магазин редуксов или тому подобное. Таким образом, компонент формы отделяется от логики, лежащей в основе этого ввода, и становится просто презентационным:

 const Form = callback ={amp}gt; { const inputRef = React.createRef(); const handleInput = event ={amp}gt; { event.preventDefault(); callback(inputRef.current.value); }; return ( {amp}lt;form onSubmit={handleInput}{amp}gt; {amp}lt;input type="text" ref={inputRef} /{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; ); }; export default Form;