ImageInput only works the second time [3.0.0-alpha only]

问题

long description but simple issue here!

I'm trying to create a basic image input form Drag and drop is cool, but regular OS dialog would be good enough. However in this case they both act the same way.

Here's the code:

const MediaLibrarieCreate = props => (
    <Create {...props}>
        <SimpleForm defaultValue={defaultValue}>
            <TextInput source="title" />
            <ImageInput source="file" accept="image/*" >
                <ImageField source="url" title="title"/>
            </ImageInput>
        </SimpleForm>
    </Create>
);

And what that displays:

The problem is that when I drop a file (or select from dialog) the first time, it doesn't work. Then, if I do it again (not reloading the page, not changing anything) it does accept the input.

Now this is curious so I tried to log the onDrop events:

<ImageInput source="file" accept="image/*" options={{
    onDrop: console.log
}} >

Which logs even on the first try:

[File]
    0: File {
        lastModified: 1566296107287
        lastModifiedDate: Tue Aug 20 2019 12:15:07 GMT+0200 (Central European Summer Time) {}
        name: "493ca08cec56142508776cab706c07ca.jpg"
        preview: "blob:http://localhost:3002/32f56e71-117b-4631-90aa-c0b312864ccf"
        size: 58380
        type: "image/jpeg"
        webkitRelativePath: ""
    }
SyntheticEvent {
    dispatchConfig: {…}, 
    _targetInst: FiberNode, 
    _dispatchListeners: ƒ, 
    _dispatchInstances: FiberNode, 
    nativeEvent: Event, 
    …
}

But if I try to log from within the <ImageField> then I see it only receives props on the second try, and behaves exactly as described above with the screenshots, only displaying the image on the second try:

const Test = props => {
    console.log(props)
    return <ImageField title="title" {...props}/>
}

// ...

<ImageInput source="file" accept="image/*">
    <Test source="url"/>
</ImageInput>

Which logs nothing on the first try, but logs this on the second:

{
    className: "ImageInput-preview-213"
    record: {
        rawFile: File
            lastModified: 1566296107287
            lastModifiedDate: Tue Aug 20 2019 12:15:07 GMT+0200 (Central European Summer Time) {}
            name: "493ca08cec56142508776cab706c07ca.jpg"
            preview: "blob:http://localhost:3002/c99da6a6-a506-4c25-b8f2-62b3c4f9c966"
            size: 58380
            type: "image/jpeg"
            webkitRelativePath: ""
            __proto__: File
        }
        url: "blob:http://localhost:3002/c99da6a6-a506-4c25-b8f2-62b3c4f9c966"
    }
    source: "url"

This is in the context of a pretty default React-Admin app. Not a custom one, nothing was done with redux, only the dataProvider is custom (but isn't involved here).

Could anyone point me in the right direction as to how to make the ImageInput work on the first interaction?

Thanks

macOS 10.14.6
Chrome 76.0.3809.100
react-admin 3.0.0-alpha.2

来源：https://stackoverflow.com/questions/57589839/imageinput-only-works-the-second-time-3-0-0-alpha-only

标签

javascript

reactjs

react-admin