Question

我使用的是bootstrap-typehead：https://github.com/ericgio/react-bootstrap-typeahead，但我不知道为什么这个软件包吓坏了。该代码给我这个错误的地方是什么问题：

道具类型失败：您向没有value处理程序的表单字段提供了onChange道具。这将呈现一个只读字段。如果该字段是可变的，请使用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（我认为呢？）开始触发警告。有an issue tracking it和a PR fixing it。

道具类型失败：您向表单字段提供了“值”道具。 React-Bootstrap-Typehead

1 个答案: