状态道具被插件道具覆盖

Question

这里是包含下面"react-dropzone"插件的组件

class Submit extends Component {
    constructor(props) {
        super(props)
        this.props.appState.recipes = JSON.parse(localStorage.getItem("recipes")) || []
    }

    submitForm() {
        debugger //I also get props properly here.
        this.props.appState.recipe.name = this.name.value
        this.props.history.push('/home')
    }

    onImageDrop(files) {
        debugger //props overridden by Dropzone props :( appState is undefined
        this.props.appState.uploadedFileCloudinaryUrl = files[0]
    }
    render() {
        return (
         <form onSubmit={() => this.submitForm()}>
            <Dropzone
                multiple={false}
                accept="image/*"
                onDrop={this.onImageDrop}>
                <p>Drop an image or click to select a file to upload.</p>
            </Dropzone>...
        )
    }
}

export default Submit

我能够在构造函数中访问 mobx props 并在 form(submitForm()) 的提交方法上访问但是如果我将文件上传到 Dropzone 并检查 "onImageDrop()" 函数中的 props 内容我不认识任何属性。好的，对于有经验的 React 开发人员来说这是有道理的，但我不明白为什么它会覆盖我自己的状态道具以及我该如何解决它？

Answer 1

绑定问题。在构造函数中预绑定 onImageDrop（这是首选方式）

constructor(props) {
    super(props)
    this.submitForm = this.submitForm.bind(this)
    this.onImageDrop = this.onImageDrop.bind(this)

    this.props.appState.recipes = JSON.parse(localStorage.getItem("recipes")) || []
}

或者像 submitForm

那样使用箭头函数

render() {
    return (
     <form onSubmit={() => this.submitForm()}>
        <Dropzone
            multiple={false}
            accept="image/*"
            onDrop={files => this.onImageDrop(files)}>
            <p>Drop an image or click to select a file to upload.</p>
        </Dropzone>...
    )
}

状态道具被插件道具覆盖

state props overridden by plugin props

reactjs

mobx

mobx-react