Question

我查看了一些其他示例，直到我希望它在redux dev工具中更新记录格式的地方都可以使用。这是我对自定义输入的第一枪，所以我并不感到惊讶但可能有人可以给我一个提示...上传者输入的确显示为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结果，以便可以将其写入db，因此我不确定此处缺少什么。可能有一种比这更简单的方法，但是在查看示例时我没有遇到过。 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

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

1 个答案: