0

我最近开始使用 React，想构建一个小应用程序来获取天气数据。我的 API 具有返回自动完成建议的功能。因此，当我的自动建议数组不为空时，我会呈现一个列表，然后单击其中一个<li>'s我想要输入框中的值。我设法设置我的状态，SearchBar但不能改变它的价值。

编辑：我尝试将我的价值从changeState()我的<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} />. 否则我可以搜索术语。

import React from 'react';
import './SearchBar.css';
import Suggestion from './Suggestion';

class SearchBar extends React.Component{
  constructor(props) {
    super(props);
    this.state = {inputValue: ''};
    this.search = this.search.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.changeState = this.changeState.bind(this);
  }

  changeState(value) {
    console.log(value);
    // Logs value of text between <li></li>
    this.setState({inputValue: value});
  }

  search() {
    this.props.onSearch(this.state.inputValue);
  }

  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
    this.props.onChange(this.state.inputValue);
  }

  handleKeyPress(e) {
    if(e.key === 'Enter') {
      this.search();
    }
  }

  render() {
    return (
      <div>
        <div className="SearchGroup" onKeyPress={this.handleKeyPress} >
          <input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} />
          <a onClick={this.search}>Go</a>
        </div>
        <Suggestion autocomplete={this.props.autocomplete} onSelect={this.changeState} />
      </div>
    );
  }
}

export default SearchBar;

为了完整起见，我的Suggestion.js：

import React from 'react';
import './Suggestion.css';

class Suggestion extends React.Component{
  constructor(props) {
    super(props);
    this.updateInputField = this.updateInputField.bind(this);
  }

  updateInputField(evt) {
    this.props.onSelect(evt.currentTarget.innerText);
  }

  render(){
      if(this.props.autocomplete && this.props.autocomplete.length > 0) {
        return (
          <div className="Suggestion">
            <ul>
              {
                this.props.autocomplete.map((location) => {
                  return (
                    <li key={location.id} onClick={this.updateInputField}>{location.name}</li>
                  )
                })
              }
            </ul>
          </div>
        );
      } else {
        return <div className="None"></div>
      }
  }
}

export default Suggestion;

我也希望提交location.urlin Suggestion，但我找不到与 in 匹配的属性evt。

4

3 回答 3

1

正如我的评论中提到的。您正在设置状态并立即将状态传递给 updateInputValue 事件处理函数中的 onChange 函数，这是不正确的。因为你不会立即更新状态值，所以状态值只会在渲染时更新，所以像下面这样直接传递 evt.target.value

updateInputValue(evt) { 
   this.setState({ inputValue: evt.target.value }); 
   this.props.onChange(evt.target.value);
}

为了在您的输入字段上查看更改后的值，您必须将 value prop 传递给 input 标签，如下所示

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>
于 2018-08-17T11:46:28.900 回答
0

我猜您正在尝试使用尚不存在的状态中的值，因为 setState 是异步的，因此要么在 setState 上使用回调

updateInputValue(evt) {
  this.setState({
    inputValue: evt.target.value
  }, ()=> this.props.onChange(this.state.inputValue));
}

或者，直接使用事件中的值

updateInputValue(evt) {
  const value = evt.target.value
  this.setState({
    inputValue: value
  });
  this.props.onChange(value)
}

再加上你还没有为你的输入赋值：

<input type="text" placeholder="City, Zip Code, Coordinates" onChange={evt => this.updateInputValue(evt)} value={this.state.inputValue}/>

于 2018-08-17T11:39:46.927 回答
0

React setState 不会立即更新状态。它将其放入队列并批量更新状态。如果要访问更新的状态，请在 setState callBack 中编写代码

this.setState({ inputValue: evt.target.value},()=> this.props.onChange(this.state.inputValue));

像这样的东西

于 2018-08-17T12:28:27.137 回答