React中具有默认值的Material ui自动完成问题答案

【问题标题】：Material ui autocomplete issue with default value in ReactReact中具有默认值的Material ui自动完成问题
【发布时间】：2018-04-27 07:41:49
【问题描述】：

我正在使用带有材料 ui 自动完成字段的 redux-form。

我需要做的是：

当页面加载自动完成值将为空时。

当用户开始输入并达到 3 个字符时，我想调用 API，该 API 的结果我想显示为自动完成数据源。

我尝试过的：

我尝试不设置 dataSource 并在第二次尝试中设置 dataSource={} 在这两种情况下我都收到相同的错误消息：

失败的道具类型：道具dataSource在AutoComplete中标记为必填，但其值为undefined。**

Home.js 类代码

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import AutoComplete from 'material-ui/AutoComplete';
import {connect} from 'react-redux';

class Home extends Component {

renderAutoComplete = ({
                          input,
                          label,
                          meta: {touched, error},
                          children,
                          ...custom
                      }) => (
    <AutoComplete
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        onChange={(event, index, value) => input.onChange(value)}
        children={children}
        {...custom}
    />

)

render() {

    const startDate = new Date();

    const {handleSubmit} = this.props;

    return (

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>


            <div>
                <Field name="Origin_1" label="FROM" component={this.renderAutoComplete} dataSource={}/>
            </div>



            <div>
                <button type="submit">
                    Submit
                </button>
            </div>

        </form>

    );

}

}

const LogInForm = reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate
})(Home);
export default connect(mapStateTOProps, {getCity})(LogInForm);

【问题讨论】：

标签： reactjs autocomplete react-redux material-ui

【解决方案1】：

从demo 和source code comments 可以看出dataSourse 属性的值需要是一个数组：

/**
 * Array of strings or nodes used to populate the list.
 */
 dataSource: PropTypes.array.isRequired,

因此您可以执行以下操作：

将dataSource的初始值设置为空数组
当输入值的长度接近3个符号时进行API调用
在 api 响应回调中更新 dataSource 属性

另外请记住，如果您将对象数组用作dataSourse 的值，则每个对象都需要具有“文本”和“值”键：

const dataSource = [
  {text: 'Some Text', value: 'someFirstValue'},
  {text: 'Some Text', value: 'someSecondValue'},
];

或用于映射的附加 dataSourceConfig：

const dataSourceCustomKeys = [
  {textKey: 'Some Text', valueKey: 'someFirstValue'},
  {textKey: 'Some Text', valueKey: 'someSecondValue'},
];
const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

【讨论】：

【解决方案2】：

AutoComplete 有一个名为 OnUpdateInput 的属性。它的工作原理类似于 keyup 属性。函数签名将是： - function(searchText: string, dataSource: array, params: object) => void searchText 将是您应该传递以进行验证的参数。

创建一个函数并传递一个参数并检查argument.length是否>=4。例如：

check(query){ if(query>=4){ //call API or pass it to actions and then to the reducer and then API }

【讨论】：