Reactjs 如何在材质ui中映射值自动完成

我在“arr”中从firebase获得了数据，但我不知道如何使用材料ui自动完成？如何在自动完成字段中映射“arr”数据

import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router';
import { connect } from 'react-redux'
import RaisedButton from 'material-ui/RaisedButton';
import { DBfirebase } from '../../Database/DBfirebase'
import { signUp } from '../../Store/Actions/Auth'
import TextField from 'material-ui/TextField';
import AppBar from 'material-ui/AppBar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import AutoComplete from 'material-ui/AutoComplete';
import * as firebase from 'firebase';
import { Search } from '../../Store/Actions/Auth'


class AddProduct extends Component {
    constructor() {
        super();
        this.state = {
            arr: [],
            productName: '',
            description: '',
            company:''

        }
        this.submit = this.submit.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.handleUpdateInput = this.handleUpdateInput.bind(this);
    }
    inputHandler(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    submit(e) {
        e.preventDefault();
        let multipath = {};
        let productDetails = {
            productName: this.state.productName,
            description: this.state.description,
           company: this.state.company,
        }
        console.log(productDetails)
        DBfirebase.refAddProduct.push(productDetails);
        browserHistory.push('/home/view-purchases')

    }

//working code
     onSearch(e) {
        let _self = this;
       // e.preventDefault()
        let ref = firebase.database().ref().child('/AddedProducts/');
        _self.arr = [];

      //  console.log(this.refs.selectedCity.value)
        //  ref.orderByChild('city').equalTo(this.refs.selectedCity.value).once('value', function (snapshot) {
  ref.once('value', function (snapshot) {



            snapshot.forEach(childSnapshot => {

                _self.arr.push(childSnapshot.val())
                console.log("arr", _self.arr)

            })
            _self.props.serachProducts(_self.arr)
            _self.setState({
                arr: _self.props.storeReducer.products

            })
        });
  }

   componentWillMount(){
       this.onSearch();
    }

    handleUpdateInput = (value) => {
    this.setState({
      arr: [
        value,
        value + value,
        value + value + value,
      ],
    });
  };


    render() {
        return (
            <div ><center>
                <AddProductForm signUpState={this.state} _inputHandler={this.inputHandler} _submit={this.submit} />
            </center>
            </div>
        );
    }
}

// AddProduct.contextTypes = {
//     router: React.PropTypes.object.isRequired
// }


const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

class AddProductForm extends React.Component {


    render() {
        console.log("this.props.signUpState.arr",this.props.signUpState.arr)
        const datasource = this.props.signUpState.arr;
        return (
            <div >

                <h1>Add New Product</h1>
                <form onSubmit={this.props._submit} >
                    <AutoComplete
          hintText="Product Name"
          filter={AutoComplete.noFilter}
          openOnFocus={true}
        //  dataSource={this.props.signUpState.arr}
            dataSource={datasource}
          onUpdateInput={this.props.signUpState.handleUpdateInput}
          dataSourceConfig={dataSourceConfig}
        />
                    <TextField
                        hintText="Product Name"
                        name="productName"
                        value={this.props.signUpState.productName}
                     floatingLabelText="Product Name"
                        onChange={this.props._inputHandler}
                        /><br /><br />

                    <TextField
                        type="text"
                        hintText="description"
                        name="description"
                        value={this.props.signUpState.description}
                       floatingLabelText="description"
                        onChange={this.props._inputHandler}
                        /><br /><br />


                        <TextField
                        type="text"
                        hintText="company"
                        name="company"
                        value={this.props.signUpState.company}
                        floatingLabelText="company"
                        onChange={this.props._inputHandler}
                        /><br />
                        <br />

                 <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>

            </div>
        )
    }
}

AddProductForm.PropTypes = {
    _inputHandler: React.PropTypes.func.isRequired,
    _submit: React.PropTypes.func.isRequired

}

const mapStateToProps = (state) => { 
     console.log(state.ProductReducer)
    return {
        storeReducer: state.ProductReducer
    }
}
const mapDispatchToProps = (dispatch) => {
        return {
        serachProducts: (data) => {
            console.log(data)
            dispatch(Search(data))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddProduct);

import React，{Component}来自“React”
从“反应路由器”导入{Link，browserHistory}；
从“react redux”导入{connect}
从“物料界面/RaisedButton”导入RaisedButton；
从“../../Database/DBfirebase”导入{DBfirebase}
从“../../Store/Actions/Auth”导入{signUp}
从“物料界面/文本字段”导入文本字段；
从“物料ui/AppBar”导入AppBar；
从“物料界面/SelectField”导入SelectField；
从“物料界面/菜单项”导入菜单项；
从“物料界面/自动完成”导入自动完成；
从“firebase”导入*作为firebase；
从“../../Store/Actions/Auth”导入{Search}
类AddProduct扩展组件{
构造函数（）{
超级（）；
此.state={
arr:[]，
产品名称：“”，
说明：“”，
公司：''
}
this.submit=this.submit.bind（this）；
this.inputHandler=this.inputHandler.bind（this）；
this.onSearch=this.onSearch.bind（this）；
this.handleUpdateInput=this.handleUpdateInput.bind（this）；
}
inputHandler（e）{
这是我的国家({
[e.target.name]：e.target.value
})
}
提交（e）{
e、 预防默认值（）；
让多路径={}；
让productDetails={
productName:this.state.productName，
description:this.state.description，
公司：这个州的公司，
}
console.log（产品详细信息）
DBfirebase.refAddProduct.push（productDetails）；
browserHistory.push（“/home/view purchases”）
}
//工作代码
研究（e）{
让_self=这个；
//e.预防违约（）
让ref=firebase.database（）.ref（）.child（'/AddedProducts/'）；
_self.arr=[]；
//console.log（this.refs.selectedCity.value）
//ref.orderByChild（'city'）.equalTo（this.refs.selectedCity.value）。once（'value'，函数（快照）{
参考一次（“值”，功能（快照）{
snapshot.forEach（childSnapshot=>{
_self.arr.push（childSnapshot.val（））
console.log（“arr”，_self.arr）
})
_self.props.serachProducts（_self.arr）
_自我状态({
arr:_self.props.storeReducer.products
})
});
}
组件willmount（）{
这个。onSearch（）；
}
handleUpdateInput=（值）=>{
这是我的国家({
arr:[
价值
价值+价值，
价值+价值+价值，
],
});
};
render（）{
返回(
);
}
}
//AddProduct.contextTypes={
//路由器：React.PropTypes.object.isRequired
// }
常量数据源配置={
text:'textKey'，
值：“valueKey”，
};
类AddProductForm扩展了React.Component{
render（）{
log（“this.props.signUpState.arr”，this.props.signUpState.arr）
const datasource=this.props.signUpState.arr；
返回(
添加新产品













)
}
}
AddProductForm.PropTypes={
_inputHandler:React.PropTypes.func.isRequired，
_提交：React.PropTypes.func.isRequired
}
常量mapStateToProps=（状态）=>{
console.log（state.ProductReducer）
返回{
storeReducer:state.ProductReducer
}
}
const mapDispatchToProps=（调度）=>{
返回{
serachProducts：（数据）=>{
console.log（数据）
调度（搜索（数据））
}
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（AddProduct）；

---

我在“arr”中获得了来自firebase的数据，但我不知道如何使用材质ui自动完成？如何在自动完成字段中映射“arr”数据？

实际上来自firebase的数据来自对象…所以首先使用object.keys（objectname）获取对象的键然后将所有键存储在数组中…在获取对象的键之后，开始在键数组上映射，并在映射中使用诸如obj[keys]之类的键调用ur对象…

import React，{Component}from'React'
import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router';
import { connect } from 'react-redux'
import RaisedButton from 'material-ui/RaisedButton';
import { DBfirebase } from '../../Database/DBfirebase'
import { signUp } from '../../Store/Actions/Auth'
import TextField from 'material-ui/TextField';
import AppBar from 'material-ui/AppBar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import AutoComplete from 'material-ui/AutoComplete';
import * as firebase from 'firebase';
import { Search } from '../../Store/Actions/Auth'


class AddProduct extends Component {
    constructor() {
        super();
        this.state = {
            arr: [],
            productName: '',
            description: '',
            company:''

        }
        this.submit = this.submit.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.handleUpdateInput = this.handleUpdateInput.bind(this);
    }
    inputHandler(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    submit(e) {
        e.preventDefault();
        let multipath = {};
        let productDetails = {
            productName: this.state.productName,
            description: this.state.description,
           company: this.state.company,
        }
        console.log(productDetails)
        DBfirebase.refAddProduct.push(productDetails);
        browserHistory.push('/home/view-purchases')

    }

//working code
     onSearch(e) {
        let _self = this;
       // e.preventDefault()
        let ref = firebase.database().ref().child('/AddedProducts/');
        _self.arr = [];

      //  console.log(this.refs.selectedCity.value)
        //  ref.orderByChild('city').equalTo(this.refs.selectedCity.value).once('value', function (snapshot) {
  ref.once('value', function (snapshot) {



            snapshot.forEach(childSnapshot => {

                _self.arr.push(childSnapshot.val())
                console.log("arr", _self.arr)

            })
            _self.props.serachProducts(_self.arr)
            _self.setState({
                arr: _self.props.storeReducer.products

            })
        });
  }

   componentWillMount(){
       this.onSearch();
    }

    handleUpdateInput = (value) => {
    this.setState({
      arr: [
        value,
        value + value,
        value + value + value,
      ],
    });
  };


    render() {
        return (
            <div ><center>
                <AddProductForm signUpState={this.state} _inputHandler={this.inputHandler} _submit={this.submit} />
            </center>
            </div>
        );
    }
}

// AddProduct.contextTypes = {
//     router: React.PropTypes.object.isRequired
// }


const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

class AddProductForm extends React.Component {


    render() {
        console.log("this.props.signUpState.arr",this.props.signUpState.arr)
        const datasource = this.props.signUpState.arr;
        return (
            <div >

                <h1>Add New Product</h1>
                <form onSubmit={this.props._submit} >
                    <AutoComplete
          hintText="Product Name"
          filter={AutoComplete.noFilter}
          openOnFocus={true}
        //  dataSource={this.props.signUpState.arr}
            dataSource={datasource}
          onUpdateInput={this.props.signUpState.handleUpdateInput}
          dataSourceConfig={dataSourceConfig}
        />
                    <TextField
                        hintText="Product Name"
                        name="productName"
                        value={this.props.signUpState.productName}
                     floatingLabelText="Product Name"
                        onChange={this.props._inputHandler}
                        /><br /><br />

                    <TextField
                        type="text"
                        hintText="description"
                        name="description"
                        value={this.props.signUpState.description}
                       floatingLabelText="description"
                        onChange={this.props._inputHandler}
                        /><br /><br />


                        <TextField
                        type="text"
                        hintText="company"
                        name="company"
                        value={this.props.signUpState.company}
                        floatingLabelText="company"
                        onChange={this.props._inputHandler}
                        /><br />
                        <br />

                 <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>

            </div>
        )
    }
}

AddProductForm.PropTypes = {
    _inputHandler: React.PropTypes.func.isRequired,
    _submit: React.PropTypes.func.isRequired

}

const mapStateToProps = (state) => { 
     console.log(state.ProductReducer)
    return {
        storeReducer: state.ProductReducer
    }
}
const mapDispatchToProps = (dispatch) => {
        return {
        serachProducts: (data) => {
            console.log(data)
            dispatch(Search(data))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddProduct);

import React, { Component } from 'react'
import { Link, browserHistory } from 'react-router';
import { connect } from 'react-redux'
import RaisedButton from 'material-ui/RaisedButton';
import { DBfirebase } from '../../Database/DBfirebase'
import { signUp } from '../../Store/Actions/Auth'
import TextField from 'material-ui/TextField';
import AppBar from 'material-ui/AppBar';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import AutoComplete from 'material-ui/AutoComplete';
import * as firebase from 'firebase';
import { Search } from '../../Store/Actions/Auth'


class AddProduct extends Component {
    constructor() {
        super();
        this.state = {
            arr: [],
            productName: '',
            description: '',
            company:''

        }
        this.submit = this.submit.bind(this);
        this.inputHandler = this.inputHandler.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.handleUpdateInput = this.handleUpdateInput.bind(this);
    }
    inputHandler(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    submit(e) {
        e.preventDefault();
        let multipath = {};
        let productDetails = {
            productName: this.state.productName,
            description: this.state.description,
           company: this.state.company,
        }
        console.log(productDetails)
        DBfirebase.refAddProduct.push(productDetails);
        browserHistory.push('/home/view-purchases')

    }

//working code
     onSearch(e) {
        let _self = this;
       // e.preventDefault()
        let ref = firebase.database().ref().child('/AddedProducts/');
        _self.arr = [];

      //  console.log(this.refs.selectedCity.value)
        //  ref.orderByChild('city').equalTo(this.refs.selectedCity.value).once('value', function (snapshot) {
  ref.once('value', function (snapshot) {



            snapshot.forEach(childSnapshot => {

                _self.arr.push(childSnapshot.val())
                console.log("arr", _self.arr)

            })
            _self.props.serachProducts(_self.arr)
            _self.setState({
                arr: _self.props.storeReducer.products

            })
        });
  }

   componentWillMount(){
       this.onSearch();
    }


    render() {
        return (
            <div ><center>
                <AddProductForm signUpState={this.state} _inputHandler={this.inputHandler} _submit={this.submit} />
            </center>
            </div>
        );
    }
}

// AddProduct.contextTypes = {
//     router: React.PropTypes.object.isRequired
// }

class AddProductForm extends React.Component {


    render() {
        console.log("this.props.signUpState.arr",this.props.signUpState.arr)

   { this.props.signUpState.arr.map((v, i) => {
                                            return (
                                              datasource.push(v.productName)
                                            )
                                        })}

        return (
            <div >

                <h1>Add New Product</h1>
                <form onSubmit={this.props._submit} >
                    <AutoComplete
          hintText="Product Name"
          filter={AutoComplete.noFilter}
          openOnFocus={true}
        //  dataSource={this.props.signUpState.arr}
            dataSource={datasource}
      //    onUpdateInput={this.props.signUpState.handleUpdateInput}
        //  dataSourceConfig={dataSourceConfig}
        />
                    <TextField
                        hintText="Product Name"
                        name="productName"
                        value={this.props.signUpState.productName}
                     floatingLabelText="Product Name"
                        onChange={this.props._inputHandler}
                        /><br /><br />

                    <TextField
                        type="text"
                        hintText="description"
                        name="description"
                        value={this.props.signUpState.description}
                       floatingLabelText="description"
                        onChange={this.props._inputHandler}
                        /><br /><br />


                        <TextField
                        type="text"
                        hintText="company"
                        name="company"
                        value={this.props.signUpState.company}
                        floatingLabelText="company"
                        onChange={this.props._inputHandler}
                        /><br />
                        <br />

                 <RaisedButton type="submit" label="Add Product" primary={false} secondary={true} /> <br /><br />
                </form>

            </div>
        )
    }
}

AddProductForm.PropTypes = {
    _inputHandler: React.PropTypes.func.isRequired,
    _submit: React.PropTypes.func.isRequired

}

const mapStateToProps = (state) => { 
     console.log(state.ProductReducer)
    return {
        storeReducer: state.ProductReducer
    }
}
const mapDispatchToProps = (dispatch) => {
        return {
        serachProducts: (data) => {
            console.log(data)
            dispatch(Search(data))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AddProduct);

从“反应路由器”导入{Link，browserHistory}；
从“react redux”导入{connect}
从“物料界面/RaisedButton”导入RaisedButton；
从“../../Database/DBfirebase”导入{DBfirebase}
从“../../Store/Actions/Auth”导入{signUp}
从“物料界面/文本字段”导入文本字段；
从“物料ui/AppBar”导入AppBar；
从“物料界面/SelectField”导入SelectField；
从“物料界面/菜单项”导入菜单项；
从“物料界面/自动完成”导入自动完成；
从“firebase”导入*作为firebase；
从“../../Store/Actions/Auth”导入{Search}
类AddProduct扩展组件{
构造函数（）{
超级（）；
此.state={
arr:[]，
产品名称：“”，
说明：“”，
公司：''
}
this.submit=this.submit.bind（this）；
this.inputHandler=this.inputHandler.bind（this）；
this.onSearch=this.onSearch.bind（this）；
this.handleUpdateInput=this.handleUpdateInput.bind（this）；
}
inputHandler（e）{
这是我的国家({
[e.target.name]：e.target.value
})
}
提交（e）{
e、 预防默认值（）；
让多路径={}；
让productDetails={
productName:this.state.productName，
description:this.state.description，
公司：这个州的公司，
}
console.log（产品详细信息）
DBfirebase.refAddProduct.push（productDetails）；
browserHistory.push（“/home/view purchases”）
}
//工作代码
研究