Question

我还在学习React，并且正在遵循代码。我有一个使用语义ui反应组件的表单，在解决了这个问题一天左右后，我只是从他们的GitHub复制并粘贴，我仍然遇到同样的问题：

override func viewDidLoad() {
messageTextfield.delegate=self
NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillShow(_:)), name:NSNotification.Name.UIKeyboardWillShow, object: self.view.window)
NotificationCenter.default.addObserver(self, selector: #selector(ViewController.keyboardWillHide(_:)), name:NSNotification.Name.UIKeyboardWillHide, object: self.view.window)
}

@objc func keyboardWillShow(_ sender: Notification) {

   let duration = sender.userInfo![UIKeyboardAnimationDurationUserInfoKey] as! Double
    let curve = sender.userInfo![UIKeyboardAnimationCurveUserInfoKey] as! UInt
    let beginningFrame = (sender.userInfo![UIKeyboardFrameBeginUserInfoKey] as! NSValue).cgRectValue
    let endFrame = (sender.userInfo![UIKeyboardFrameEndUserInfoKey] as! NSValue).cgRectValue
    let deltaY = endFrame.origin.y - beginningFrame.origin.y

    UIView.animateKeyframes(withDuration: duration, delay: 0.0, options: UIViewKeyframeAnimationOptions(rawValue: curve), animations: {
        self.containerView.frame.origin.y += deltaY
    }, completion: nil)

}


@objc func keyboardWillHide(_ sender: Notification) {
    let userInfo: [AnyHashable: Any] = sender.userInfo!
    let keyboardSize: CGSize = (userInfo[UIKeyboardFrameBeginUserInfoKey]! as AnyObject).cgRectValue.size
    self.containerView.frame.origin.y += keyboardSize.height

}
override func viewDidDisappear(_ animated: Bool) {
    NotificationCenter.default.removeObserver(self, name: NSNotification.Name.UIKeyboardWillShow, object: self.view.window)
    NotificationCenter.default.removeObserver(self, name: NSNotification.Name.UIKeyboardWillHide, object: self.view.window)
}



func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    textField.resignFirstResponder()
    return true
}


override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?){

   super.touchesBegan(touches, with: event)
    view.endEditing(true)
}

控制台给我一个：警告：失败的道具类型：提供给onSearchChange = (e, data) => { clearTimeout(this.timer); this.setState({ query: data }); this.timer = setTimeout(this.fetchOptions, 1000); }; onChange = (e, data) => { this.setState({ query: data.value }); this.props.onBookSelect(this.state.books[data.value]); }; render() { return ( <Form> <Dropdown search fluid placeholder="Search for a book by title" value={this.state.query} onSearchChange={this.onSearchChange} options={this.state.options} loading={this.state.loading} onChange={this.onChange} /> </Form> ); } }的道具value无效。事实证明，我的值是作为包含我的Dropdown组件的Object传递的。

当我写这个问题的时候，我意识到我在v16中他们在15岁。所以，答案可能就像更新v16的语法一样简单，但我不知道该怎么做。

修改：我安装了React 15.x，这确实解决了我遇到的问题，所以我想我现在的真正问题是当我将Dropdown更改为{onSearchChange时，fetchOptions无法data触发data.value {1}}。 fetchOptions只是一个看似如下的axios电话：

fetchOptions = () => {
if (!this.state.query) return;
this.setState({ loading: true });
axios
  .get(`/api/books/search?q=${this.state.query}`)
  .then(res => res.data.books)
  .then(books => {
    const options = [];
    const booksHash = {};
    books.forEach(book => {
      booksHash[book.goodreadsId] = book;
      options.push({
        key: book.goodreadsId,
        value: book.goodreadsId,
        text: book.title
      });
    });
    this.setState({ loading: false, options, books: booksHash });
  });
};

Answer 1

应该是一个简单的解决方案，您需要做的就是更新onSearchChange：

onSearchChange = (e, data) => {
    clearTimeout(this.timer);
    this.setState({
      query: data.value
    });
    this.timer = setTimeout(this.fetchOptions, 1000);
};

您正在将参数data保存到this.state.query。实际上，您需要存储data.value来获取字符串值。看看onSearchChange的工作原理。

onSearchChange(event: SyntheticEvent, data: object)
  event: React's original SyntheticEvent.
  data: All props, includes current value of searchQuery.

Answer 2

完成相同的教程（Rem Zolotykh使用React系列构建真实Web应用程序）并遇到与更新版本的React相同的问题。

发现问题以及如何解决问题：

更改onSearchChange函数以使用data.searchQuery而不是data或data.value：

onSearchChange = (e, data) => {
    clearTimeout(this.timer);
    this.setState({
       query: data.searchQuery // <-- Right here
    });
    this.timer = setTimeout(this.fetchOptions, 1000);
 };

这使它成功。（有些出乎意料的是，在onChange函数中将其保留为data.value）

反应：输入字段似乎是自我回归

2 个答案: