作出反应 - 如何打印组件

Question

内输入的onChange的价值这是我的组件：

export default function ImageUpload({ onSuccess, children}) { 

    let value = ''; 
    const onUpload = async (element) => { 
    element = element.target.files; 
    let response; 
    // Call endpoint to upload the file 
    value = element[0].name; 
    return onSuccess(response.url); 
    }; 

    return <div> 
    <div > 
     {children} 
     <input type="file" id="upload" onChange={onUpload.bind(this)} /> 
    </div> 
    <span>{value}</span> 
    </div>; 
} 

我想跨度内打印从用户选择的文件的名称。 我对状态使用了redux，但这些信息不属于该状态。 这种方式不起作用，有人可以解释我为什么吗？

UPDATE 由于看起来像有没有办法实现这个无状态我的问题是关于最佳方法：使用 也Redux的，如果我不需要这个值的组件之外或使用的内部状态组件，但结束了Redux和这个状态？

Answer 1

我能想到的改变方式，转变您的组件类类型的组件，这样的事情：

export default class ImageUpload extends Component { 
    constructor() { 
    this.state = { 
     value: '' 
    } 
    this.onUpload = this.onUpload.bind(this) 
    } 

    onUpload() { 
    let value = ''; 
    const onUpload = async (element) => { 
     element = element.target.files; 
     let response; 
     // Call endpoint to upload the file 
     value = element[0].name; 
     this.props.onSuccess(response.url); 
     this.setState({ value: value }) 
    }; 
    } 

    render() { 
    return <div> 
     <div > 
     {children} 
     <input type="file" id="upload" onChange={this.onUpload} /> 
     </div> 
     <span>{this.state.value}</span> 
    </div>; 
    } 

}