Question

我正在尝试创建一个天气应用程序，并使用外部组件'react-geosuggest'。

我的问题是，当我更新输入（SEE：onChange = {this.onInputChange}）时，该函数不接受我的输入，也不改变状态，即我得到未定义。

有趣的是，我已将initialvalue设置为纽约，并且在提交时我得到结果，而不更改输入信息，因此问题在于更新输入信息并将其传递给函数handleOnSubmit。

我已经阅读了有关该组件的文档，但无法弄明白，它具有与简单相同的值，但有些东西不起作用。

谢谢！

  class SearchBar extends Component {
    constructor() {
      super()

      this.state = {city: 'New York'};
    }

    onInputChange = (e) => {
      this.setState({city: e.target.value});
    }

       handleOnSubmit = (e) => {
       e.preventDefault();
      this.props.fetchWeather(this.state.city);
      this.setState({city: ''});
      }

render () {
  return (
    <div>
        <form onSubmit={this.handleOnSubmit}>
          <Geosuggest
            initialValue={this.state.city}
            onChange={this.onInputChange}
            types={['(cities)']}
          />
          <button type="submit">Search</button>
        </form>
      </div>
    </div>
      );
      }
}

Answer 1

请改用e.currentTarget.value。有关详情，请参阅this question。

也试试这个：

onChange={this.onInputChange.bind(this)}

如果您想更简洁，可以这样写：

<Geosuggest
   initialValue={this.state.city}
   onChange={(e)=> this.setState({city: e.currentTarget.value})}
   types={['(cities)']}
   />

Answer 2

在构造函数上绑定事件，在render中设置value属性，并将setState移除为在handleOnSubmit事件中执行的空字符串。我担心最后一个是改变输入时不起作用的。

class SearchBar extends Component {
        constructor(props) {
          super(props);
          this.state = {city: 'New York'};
          this.onInputChange = this.onInputChange.bind(this);
        }

        onInputChange = (city) => {
            this.setState({city: city});
        }

        handleOnSubmit = (e) => {
             e.preventDefault();
             this.props.fetchWeather(this.state.city);
        }

        render () {
          return (
            <div>
                <form onSubmit={this.handleOnSubmit}>
                  <Geosuggest
                    initialValue={this.state.city}
                    value={this.state.city}
                    onChange={this.onInputChange}
                    types={['(cities)']}
                />
             <button type="submit">Search</button>
            </form>
          </div>
        </div>
       );
      }
    }

Answer 3

您还可以使用onSuggestSelect获取所选地址的值：

calc_date

然后像这样访问组件：

<Geosuggest
  ref={el=>this._geoSuggest=el}
  placeholder="Search for address"
  onSuggestSelect={this.onSuggestSelect}
  country='us'
/>

React Geosuggest不会更新状态

3 个答案: