React-materialize Chip - Javascript Плагин - автозаполнение: как обновить переменную состояния - PullRequest
Новая
       36

React-materialize Chip - Javascript Плагин - автозаполнение: как обновить переменную состояния

0 голосов
/ 01 мая 2020

Я хотел бы обновить массив переменных состояния, но не могу понять, как обновлять изменения. Нет события, связанного с чипом. Я хочу изменить массив "страны", но когда я пытаюсь связать его с чипом React-materialize, он не работает.

Как я могу получить событие из чипа? Вы можете помочь ? Спасибо

Ниже мой код также доступен в CodeSandbox 

import React from "react";
import ReactDOM from "react-dom";
import { Icon, Chip} from 'react-materialize';
import 'materialize-css';


    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          name: "Venom",
          countries: [{ name: 'France' }, { name: 'Germany' }],
        };
      }
      handleAddCountry = (e) => {
        console.log("Chip :")
        console.log(e.target.name)
        this.setState({ countries: this.state.countries.concat([{ name: e.target.value }]) });
      }
      handleAddFrance = (e) => {
        console.log("Button:")
        console.log(e.target.value)
        this.setState({ countries: this.state.countries.concat([{ name: e.target.value }]) });
      }
      render() {
        const { countries} = this.state
        return (
        <div>
              <div>
                <h1>{this.state.name}</h1>
              </div>

            <div>
                <Chip
                        onChange={ this.handleAddCountry } 
                        close={false}
                        closeIcon={<Icon className="close">close</Icon>}
                        options={{
                        placeholder: 'saisir un territoire',
                        secondaryPlaceholder: '+territoire',
                        autocompleteOptions: {
                        data: {
                        '   France métropolitaine   '   :   null,
                        '   DOM - TOM   '   :   null,
                        '   DOM '   :   null,
                        '   Afghanistan '   :   null,
                        },
                        limit: Infinity,
                        minLength: 1,
                        onAutocomplete: function noRefCheck(){}
                        }
                        }}
                />
            </div>
            <button type="button" onClick={this.handleAddFrance} value="France" className="small">Add France</button>
                <br></br>    
                {countries.map(country => <div>{country.name}</div>)}
          </div>
        );
      }
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      rootElement

);
...