如何为AutocompleteInput/ReferenceInput设置空值？

Question

I AutocompleteInput包装了ReferenceInput。在我的情况下，一个项目有很多帐户。在编辑帐户页面上，我将项目设置为可用并保存。

<ReferenceInput source="project_id" reference="projects" allowEmpty filterToQuery={searchText => ({ query_content: searchText })}> 
    <AutocompleteInput optionText="title" /> 
</ReferenceInput> 

现在我需要设置为null价值project_id。它甚至可以按下我可以放置在AutocompleteInput附近的按钮，但我不知道如何将值设置为reduce。最好我想避免特殊的http请求API来重置此字段。 谢谢！

Answer 1

我只是采取AutocompleteInput并追加到它按钮来清除字段。并调用NullableAutocompleteInput。然后也如前面粘贴到ReferenceInput

<ReferenceInput source="field_id" reference="resources" allowEmpty filterToQuery={searchText => ({ query_title: searchText })}> 
      <NullableAutocompleteInput optionText={(choice) => optionRenderer(choice, 'Resource', 'title')} /> 
     </ReferenceInput> 

和整个代码组件

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import AutoComplete from 'material-ui/AutoComplete'; 

import BackspaceIcon from 'material-ui/svg-icons/content/backspace'; 
import IconButton from 'material-ui/IconButton'; 

import {FieldTitle} from 'admin-on-rest'; 
import {translate} from 'admin-on-rest'; 

export class NullableAutocompleteInput extends Component { 
    handleNewRequest = (chosenRequest, index) => { 
     if (index !== -1) { 
      const { choices, input, optionValue } = this.props; 
      input.onChange(choices[index][optionValue]); 
     } 
    } 

    getSuggestion(choice) { 
     const { optionText, translate, translateChoice } = this.props; 
     const choiceName = typeof optionText === 'function' ? optionText(choice) : choice[optionText]; 
     return translateChoice ? translate(choiceName, { _: choiceName }) : choiceName; 
    } 

    clearData() { 
     this.props.input.onChange(null); 
    } 

    render() { 
     const { 
      choices, 
      elStyle, 
      filter, 
      input, 
      isRequired, 
      label, 
      meta: { touched, error }, 
      options, 
      optionValue, 
      resource, 
      setFilter, 
      source, 
     } = this.props; 

     const selectedSource = choices.find(choice => choice[optionValue] === input.value); 
     const dataSource = choices.map(choice => ({ 
      value: choice[optionValue], 
      text: this.getSuggestion(choice), 
     })); 
     return (
      <div> 
      <AutoComplete 
       searchText={selectedSource && this.getSuggestion(selectedSource)} 
       dataSource={dataSource} 
       floatingLabelText={<FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />} 
       filter={filter} 
       onNewRequest={this.handleNewRequest} 
       onUpdateInput={setFilter} 
       openOnFocus 
       style={elStyle} 
       errorText={touched && error} 
       {...options} 
      /> 
      <IconButton onTouchTap={this.clearData.bind(this)} tooltip="Clear Data" tooltipPosition="top-right"> 
       <BackspaceIcon color='grey' hoverColor='black'/> 
      </IconButton> 
      </div> 
     ); 
    } 
} 

NullableAutocompleteInput.propTypes = { 
    addField: PropTypes.bool.isRequired, 
    choices: PropTypes.arrayOf(PropTypes.object), 
    elStyle: PropTypes.object, 
    filter: PropTypes.func.isRequired, 
    input: PropTypes.object, 
    isRequired: PropTypes.bool, 
    label: PropTypes.string, 
    meta: PropTypes.object, 
    options: PropTypes.object, 
    optionElement: PropTypes.element, 
    optionText: PropTypes.oneOfType([ 
     PropTypes.string, 
     PropTypes.func, 
    ]).isRequired, 
    optionValue: PropTypes.string.isRequired, 
    resource: PropTypes.string, 
    setFilter: PropTypes.func, 
    source: PropTypes.string, 
    translate: PropTypes.func.isRequired, 
    translateChoice: PropTypes.bool.isRequired, 
}; 

NullableAutocompleteInput.defaultProps = { 
    addField: true, 
    choices: [], 
    filter: AutoComplete.fuzzyFilter, 
    options: {}, 
    optionText: 'name', 
    optionValue: 'id', 
    translateChoice: true, 
}; 

export default translate(NullableAutocompleteInput);