作出反應 - 如何打印組件

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>; 
    } 

}