Неверная форма propType: вы указали "значение" в поле формы без обработчика onChange

Когда я загружаю свое приложение для реагирования, я получаю эту ошибку в консоли.

Предупреждение: Неверная форма propType: вы указали value в поле формы без обработчика onChange. Это сделает поле только для чтения. Если поле должно быть изменчивым, используйте defaultValue. В противном случае установите либо onChange либо readOnly. Проверьте метод рендеринга AppFrame.

Мой компонент AppFrame находится ниже:

class AppFrame extends Component {
    render() {
        return (
            <div>
                <header className="navbar navbar-fixed-top navbar-shadow">
                    <div className="navbar-branding">
                        <a className="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form className="navbar-form navbar-left navbar-search alt" role="search">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search..."
                                   value="Search..."/>
                        </div>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li className="dropdown menu-merge">
                            <span className="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" className="nano nano-light affix">

                    <div className="sidebar-left-content nano-content">

                        <ul className="nav sidebar-menu">
                            <li className="sidebar-label pt20">Menu</li>
                            <li className="sidebar-label">
                                <IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/fixtures" activeClassName="active">Fixtures</Link>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/players" activeClassName="active">Players</Link>
                            </li>
                        </ul>

                    </div>

                </aside>
                <section id="content_wrapper">
                    <section id="content" className="table-layout animated fadeIn">
                        {this.props.children}
                    </section>
                </section>
            </div>

        )
    }
}

export default AppFrame;

Я изо всех сил пытаюсь понять, что я на самом деле делаю неправильно. Приложение запускается и работает, но я пытаюсь удалить все предупреждения/ошибки консоли.

Ответ 1

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

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

к этому:

<input type="text" className="form-control" placeholder="Search..." />

Или, если вы считаете, что должны иметь его, установите его как defaultValue:

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

Документация: https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

Ответ 2

Если вы не берете входное значение от пользователя в этом поле ввода, вам необходимо сделать это поле только для чтения, установив defaultValue.

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

state = {
   keyword: 'test' 
} 

inputChangedHandler = (event) => {
    const updatedKeyword = event.target.value;
    // May be call for search result
}

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
}

Ответ 3

предупреждение появляется, потому что вы устанавливаете атрибут value на входе и не предоставляете никакого обработчика для его обновления. есть два способа сделать это:

вы можете использовать ref для получения значений формы из DOM.

https://reactjs.org/docs/uncontrolled-components.html
установить onChange обработчик функции.