我的自动完成程序包不会更新状态

Question

我使用Algolia Places自动填写我的地址输入。但是，当我检查组件的状态时，可以看到单击按钮，即使文本在字段中发生了更改，也不会更新状态。我不明白，为什么它不起作用，因为我正确设置了handleChange函数。

export function handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

export function addAlgolia() {
    var places = require('places.js');
    var placesAutocomplete = places({
    appId: "APPID",
    apiKey: "APIKEY",
    container: document.querySelector('#address-input')
    });
}

输入示例代码：

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
import Dashboard from '../Dashboard'
import Axios from 'axios'
import * as Cookies from 'js-cookie'
import ErrorContainer from '../../components/ErrorContainer'
import { addAlgolia, handleChange } from 'utils'

export class OrganismSettings extends Component {

    constructor(props) {
        super(props);
        this.state = {loading: true, organism: [], name: "", description: "", address: "", picture: null}
        this.getOrganism = this.getOrganism.bind(this);
        this.handleChange = handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChangePicture = this.handleChangePicture.bind(this);
    }

    componentDidMount() {
        this.getOrganism();
        addAlgolia()
    }

    getOrganism() {
        Axios.get('http://localhost:8000/api/organism/settings', {headers: {Accept: 'application/json', Authorization: 'Bearer ' + Cookies.get('token')}})
        .then((success) => {
            var organism = success.data.data.organism;
            this.setState({organism: success.data.data.organism, loading: false})
            this.setState({name: organism.name, description: organism.description, address: organism.address})
        }, (error) => {
            this.props.history.push('/organisme/creation')
        })
    }

      handleChangePicture(event) {
        this.setState({picture: event.target.files[0]})
    }

    handleSubmit(e) {
        e.preventDefault();
        var formData = new FormData();
        formData.append('name', this.state.name);
        formData.append('description', this.state.description);
        formData.append('address', this.state.address);
        formData.append('picture', this.state.picture);
        formData.append('_method', 'PATCH');
        var token = Cookies.get('token');
        Axios.post('http://localhost:8000/api/organism/settings', formData, {
            headers: {
                "Accept": 'application/json',
                "Authorization": `Bearer ${token}`,
            }
        }).then(
            (success) => {
                this.setState({loading: false});
                //this.props.history.push('/organisme')
            }, (error) => {
                this.setState({errors : error.response.data.data})
                if(error.response.data.redirect != "") {
                    this.props.history.push(error.response.data.redirect)
                }
            }
        )
    }

    render() {
        return (
            <Dashboard loading={this.state.loading}>
                <section className="section has-text-centered">
                    <div className="column is-offset-1 is-10">
                    <h1 className="title is-size-1 register-title">Paramètres de {this.state.name}</h1>
                        <section className="section organism-register">
                            <form encType="multipart/form-data" className="user-form fullbox-form" method="POST" onSubmit={this.handleSubmit}>
                                <div className="has-text-left input-fixer">
                                <label className="is-size-4">Nom de l'organisme : </label><input type="text" name="name" placeholder="Nom de l'organisme" value={this.state.name} onChange={this.handleChange}/>
                                <label className="is-size-4">Description de l'organisme : </label><textarea name="description" placeholder="Description de l'organisme" value={this.state.description} onChange={this.handleChange}/>
                                <label className="is-size-4">Adresse de l'organisme : </label><input id="address-input" type="text" name="address" value={this.state.address} onChange={this.handleChange}></input>
                                <label className="is-size-4">Ajouter le logo de votre organisme : </label>
                                <input type="file" name="picture" onChange={this.handleChangePicture} />
                                </div>
                                <ErrorContainer errors={this.state.errors} />
                                <button className="button is-primary has-text-left">Soumettre les changements</button>
                            </form>
                        </section>
                    </div>
                </section>
            </Dashboard>
        )
    }
}

export default withRouter(OrganismSettings)

Answer 1

Algolia Places仅更新输入值，因此您必须自行添加与状态的同步。

最合适的方法是使用库提供的事件：

https://community.algolia.com/places/documentation.html#events

使用您的代码：

export function addAlgolia() {
    var places = require('places.js');
    var placesAutocomplete = places({
       appId: "APPID",
       apiKey: "APIKEY",
       container: document.querySelector('#address-input')
    });

    placesAutocomplete.on('change', e => {
         const value = e.suggestion;
         // here You have to call something like this.setState(...) with "value" for Your main component
    });
}