javascript - 输入值未使用 react-admin 中的自定义输入更新

Question

我查看了其他一些示例，这一直有效，直到我希望它更新 redux 开发工具中的记录表单。这是我第一次尝试自定义输入，所以我并不感到惊讶，但可能有人可以提醒我...上传者输入确实显示为redux中的注册字段...这是我的输入类

import React, { Component, PropTypes } from 'react';
import { addField } from 'react-admin';


class CloudinaryInput extends Component {
  static propTypes: {
    label: PropTypes.string,
    onUploadSuccess: PropTypes.func,
  }

  static defaultProps = {
    label: 'Upload Image to Cloudinary'
  }

  processCloudinaryResult = (error, results) => {
    if (results && results.event === 'success') {
      const result = results.info;
      const { secure_url, path } = result;      
      this.props.onUploadSuccess({publicUrl: secure_url, cloudinaryId: path});      
    }
  }

  componentDidMount(){
    this.openCloudinaryUploader();
  }

  openCloudinaryUploader = () => {
    //const { cloud_name, unsigned_upload_preset } = this.props.cloudinarySettings;
        let cloud_name = 'some_cloud_name';
        window.cloudinary.openUploadWidget({
            cloud_name: cloud_name,
            upload_preset: 'some_upload_preset',
            showAdvancedOptions: true,
            inline_container: '#inline_container',    
            cropping: true,    
            multiple: false,   
            defaultSource: "local",
            sources: [    "local",        
                            "url",
                            "camera",        
                            "image_search",        
                            "facebook",        
                            "dropbox",        
                            "instagram"    
                    ]
        }, this.processCloudinaryResult
    );
  }

  render() {
    return (
        <div id="inline_container"></div>        
    )
  }
}

export default addField(CloudinaryInput);

和一个容器如下:

import React from 'react';
import CloudinaryInput from './CloudinaryInput'

class CloudinaryInputContainer extends React.Component {
    onImageUpload = ({publicUrl, cloudinaryId}) => {
      /* do something with the just uploaded image id/url. */ 
      console.log('URL: ' + publicUrl);
      console.log('ID: ' + cloudinaryId);   
    }

    render() {
      return <div>
        <CloudinaryInput source='uploader' onUploadSuccess={this.onImageUpload} />
      </div>
    }
  }

  export default CloudinaryInputContainer;

我真正感兴趣的只是将 url cloudinary 结果填充到我的表单值中，以便我可以将其写入数据库，所以我不确定我在这里缺少什么。可能有比这更简单的方法，但我在查看示例时没有遇到这种方法。 console.log 行打印出正确的值

Answer 1

这是我使用 react-select 的组件在 react-admin .
您应该使用 useInput而是 addField

import * as React from 'react'
import { Labeled, useInput } from 'react-admin'
import AsyncSelect from 'react-select/async';

const SelectAsync = props => {
  const {
    input: { name, onChange, value },
    meta: { touched, error },
    isRequired
  } = useInput(props);

  const customOnChange = (option, type) => {
    if (type.action === "select-option") {
      onChange(option.value)
    }
  }

  return <Labeled label={props.label} fullWidth>
    <AsyncSelect {...props}
      name={name}
      value={value}
      onChange={customOnChange}
      error={!!(touched && error)}
      helperText={touched && error}
      required={isRequired}
    />
  </Labeled>
};

export default SelectAsync