道具類型失敗：您向表單字段提供了“值”道具。 反應 - 引導 - Typehead

Question

我正在使用bootstrap-typehead： https ： //github.com/ericgio/react-bootstrap-typeahead ，但我無法弄清楚為什么這個軟件包嚇壞了。 這段代碼有什么不對，它給了我這個錯誤：

道具類型失敗：您在沒有onChange處理程序的情況下為表單字段提供了value道具。 這將呈現一個只讀字段。 如果該字段是可變字段，請使用defaultValue 。 否則，設置onChange或readOnly 。

import React, { Component } from "react";
import Dropdown from "../../bootstrap/Dropdown";
import RealmAPIs from "../../../API/realms/RealmAPI";

import {Typeahead} from 'react-bootstrap-typeahead';

import AutoComplete from "../../bootstrap/AutoComplete";
// import RealmAPI from '../../../API/realms/RealmAPI';

var options = [
  'John',
  'Miles',
  'Charles',
  'Herbie',
];

export default class FindCharacter extends Component {
  state = {
    realmName: "",
    characterName: "",
    realms: []
  };



  setRealmName = value => {
    this.setState({ realmName: value });
  };

  componentDidMount() {
    // let realms = [...this.state.realms];
    // RealmAPIs.getAllRealms().then(response =>
    //   console.log(response.realms.map(value => {}))
    // );
  }

  render() {
    return (
      <div>
        <form className="form-inline justify-content-md-center">
          <div className="form-group mb-2">
            {/* <Dropdown setRealmName={this.setRealmName}/> */}
            <Typeahead
              labelKey="name"
            placeholder="Type a realm"
              onChange={selected => {
                console.log(selected);
              }}
              options={
                options
              }
            />
          </div>
          <div className="form-group mx-sm-3 mb-2">
            <input
              type="text"
              className="form-control"
              id="characterName"
              placeholder="Enter Character Name"
            />
          </div>
          <button
            type="submit"
            className="btn btn-primary mb-2"
            onClick={e => {
              e.preventDefault();
              console.log(this.state.name);
            }}
          >
            Submit
          </button>
        </form>
      </div>
    );
  }
}

Answer 1

升級到react-bootstrap-typeahead v3.2.3應該可以解決這個問題。

我不確定為什么，但是React v16.5（我認為呢？）開始觸發警告。 跟蹤它以及PR對其進行修復都存在問題 。