2017-02-20 8 views
0

内の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とこの状態の両方を持つように終了しますか?

+1

は、なぜあなたはそれが状態に属していないと言うのですが?ファイルの名前を表示するには、コンポーネントを再レンダリングする必要があります。少なくともファイルの名前を状態に入れることができます。 –

+0

は、コンポーネント内でのみ有用な情報であり、外部で使用されることはありません。 – Tres

答えて

2
私はアプローチを変えることを考えると、クラス型コンポーネントにそのようなことを、あなたのコンポーネントを変換することができ

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

} 
+0

コンストラクタでバインドすると、onUploadはレンダリングで不要にバインドされます。 – Mateusz

+0

ありがとう、ただこれを編集しました – Robsonsjre

+0

コンポーネントの内部状態を使わずにこれを達成する方法はありません – Tres

関連する問題