How to do an Autocomplete in a ReactTable with Reactjs

0

In the ReactTable I have the Aircraft column, which is editable but I do not want the value to be updated as it is now, but, when you click there is an autocomplete by code, and when selecting an Aircraft, the column Weight will load the automatic value.

The Table is called "aircraft" The data I want to call are: Code, Name and Capacity.

This is the code where I call the table, but I do not know how to make it work with autocomplete

    componentWillMount =()=>{
        this.getAeronave ()
    }

//Aqui obtengo todas las aeronaves 
    getAeronave = async () => {
        try {
          const response = await getAll('aeronaves')
          console.log(response.data)
          this.setState({
            status: "done",
            aeronave: response.data   
          });
        } catch (error) {
          this.setState({
            status: "error"
          });
        }
      };




                <ReactTable 
                    contentEditable
                    collapseOnDataChange={false}
                    data={data}
                    itemsPerPage={20}
                    onKeyPress={this.handleKeyPress}
                    columns={[
                        {
                            Header: "Aeronave",
                            columns: [
                                {
                                    Header: "Aeronave",
                                    id: "aeronave",
                                    accessor: flight => ({
                                        arrival: flight.arrival.configuration.aeronave,
                                        departure: flight.departure.configuration.aeronave
                                    }),
                                    width: 50,
                                    className: "center",
                                    Cell: row => (
                                        <DobleRow
                                            edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
                                            arrival={row.value.arrival}
                                            departure={row.value.departure}
                                            editcontentIn={e => this.props.editcontentIn("aeronave",
                                                {
                                                    arrival_id: row.original.arrival._id,
                                                    flight_id: row.original._id,
                                                    body: {
                                                        configuration: {
                                                            aeronave: e.target.innerHTML
                                                        }
                                                    }
                                                }
                                            )}
                                        />
                                    )
                                }
                            ]
                        },

                        {
                            Header: "Peso",
                            columns: [
                                {
                                    Header: "Peso",
                                    id: "peso",
                                    accessor: flight => ({
                                        arrival: flight.arrival.configuration.peso,
                                        departure: flight.departure.configuration.peso
                                    }),
                                    width: 50,
                                    className: "center",
                                    Cell: row => (
                                        <DobleRow
                                            edit={row.original.status === 'open' ? true : false} fieldMode={fieldMode}
                                            arrival={row.value.arrival}
                                            departure={row.value.departure}
                                            editcontentIn={e => this.props.editcontentIn("peso",
                                                {
                                                    arrival_id: row.original.arrival._id,
                                                    flight_id: row.original._id,
                                                    body: {
                                                        configuration: {
                                                            peso: e.target.innerHTML
                                                        }
                                                    }
                                                }

                                            )}
                                        />
                                    )
                                }
                            ]
                        },

                    ]
                    }
/>
    
asked by Json 22.10.2018 в 01:08
source

0 answers