が反応 - コンポーネント

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

}