Javascript 输入值未使用react admin中的自定义输入更新
我已经看了一些其他的例子,我希望它能够在redux开发工具中更新记录表单。。这是我第一次尝试自定义输入,所以我并不感到惊讶,但我想也许有人能给我一个提示。。。上传器输入在redux中显示为注册字段。。。这是我的输入类Javascript 输入值未使用react admin中的自定义输入更新,javascript,redux,redux-form,react-admin,Javascript,Redux,Redux Form,React Admin,我已经看了一些其他的例子,我希望它能够在redux开发工具中更新记录表单。。这是我第一次尝试自定义输入,所以我并不感到惊讶,但我想也许有人能给我一个提示。。。上传器输入在redux中显示为注册字段。。。这是我的输入类 import React, { Component, PropTypes } from 'react'; import { addField } from 'react-admin'; class CloudinaryInput extends Component { st
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行打印出正确的值这是我在react admin中使用react select的组件 您应该使用useInput而不是addField 从“React”导入*作为React 从“react admin”导入{Labeled,useInput} 从“反应选择/异步”导入异步选择; const SelectAsync=props=>{ 常数{ 输入:{name,onChange,value}, meta:{触摸,错误}, 需要 }=使用InputProps; const customOnChange=选项,类型=>{ 如果type.action==选择选项{ onchangepoption.value } } 回来 }; 导出默认SelectAsync