Question

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

我需要做的是：

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

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

我尝试过：

我尝试不设置dataSource并在seconde中尝试在我收到相同错误消息的情况下设置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);

Answer 1

从demo和source code comments，您可以看到dataSourse属性的值必须是数组：

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

所以你可以做到以下几点：

将dataSource的初始值设置为空数组
当输入值的长度更像3个符号时进行API调用
在api responce回调

dataSource

另请注意，如果您将对象数组用于dataSourse的值，则每个对象都需要包含“text”和“value”键：

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',
};

Answer 2

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

创建一个函数并传递一个参数并检查argument.length＆gt; = 4。例如：

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

材料ui自动完成问题，React

2 个答案: