尝试封装TextInput,获取addField错误

时间:2018-03-01 19:49:33

标签: textinput admin-on-rest

我正在尝试封装TextInput,以便在值更改时执行服务器端查找,并根据结果向用户显示通知:“该组名已存在”。我一直用这个作为我的例子开始:https://marmelab.com/admin-on-rest/Actions.html#the-simple-way 我当前的错误是

  

错误:未在redux-form中调用TextInput组件。你装饰它并忘记将addField prop添加到组件中吗?有关详细信息,请参阅https://marmelab.com/admin-on-rest/Inputs.html#writing-your-own-input-component

但即使我加入

NameLookupTextInput.defaultProps = {
    addField: true, // require a <Field> decoration
}

我仍然得到错误。继承我的代码

class NameLookupTextInput extends TextInput {
    handleChange = eventOrValue => {
        console.log("handleChange",eventOrValue);
        this.props.onChange(eventOrValue);
        this.props.input.onChange(eventOrValue);

        if(this.timeoutHandle){
            clearTimeout(this.timeoutHandle);
        }
        console.log(fetch);
        this.timeoutHandle = setTimeout(function(){
            let value = this.props.input.value;

            fetchUtils.fetchJson(API_ENDPOINT+'/groupNameCheck/'+value, { method: 'GET'})
                .then((data) => {

                    console.log(data);
                    let exists = data.json.exists;
                    let name = data.json.name;
                    if(exists){
                        console.log(this.props.showNotification('The group name "'+name+'" already exists.'));
                    }else{
                        console.log(this.props.showNotification('The group name "'+name+'" does not exist.'));
                    }
                })
                .catch((e) => {
                    console.error(e);
                    //showNotification('Error: comment not approved', 'warning')
                });
        }.bind(this),500);
    };

}


export default connect(null, {
    showNotification: showNotificationAction
})(NameLookupTextInput);

0 个答案:

没有答案