reduxForm入力ファイルは、私が入力タイプのファイルが含まれているreduxFormを持っている未定義

Question

を返し、選択したファイルの戻り値は私のコードを定義されていないです：

<Field 
    label="Select a File" 
    name="file" 
    component={this.renderFileField}/> 

とrenderFileField機能である：

renderFileField(field){ 

return(

     <div> 
     <label className="label">{field.label}</label> 
     <label htmlFor="file" className="input input-file"> 
      <div className="button mystyle-btn-u"> 
      <input type="file" id="file" {...field.input} 
      value={null} 
      onChange={(e)=> 
       { 
       field.onChangeExtra(); 
       //remove fakepath string from file name that would display in input 
       ReactDOM.findDOMNode(e.target).parentNode.nextSibling.value = e.target.value.replace(/.*fakepath\\/,""); 
       //fileName value would set with file name user selected from file picker 
       this.setState({fileName:e.target.value.replace(/.*fakepath\\/,"")})}} 
      ></input> 
      Browse 
      </div> 
      <input 
      value={this.state.fileName} 
      type="text" onChange={this.ChangeFileName.bind(this)}/> 
     </label> 
     </div> 
    ); 
} 

私もDropzoneの入力ファイルを試しましたが、ドラッグアンドドロップでファイルを選択することはできません。

Answer 1

私の知る限りでは、これがどのようである：それはそれはサポートしていません注意することが重要です

1） の値を設定します。値を何かに戻したい場合は、 というカスタムの "selected files"コンポーネントを作成する必要があります。

2）fields.yourField.handleChange（）を呼び出す前に、イベントの構文解析を行う必要があります。このような何か：

<input 
    type="file" 
    onChange={ 
    (e) => {  
     e.preventDefault(); 
     const { fields } = this.props; 
     // convert files to an array 
     const files = [ ...e.target.files ]; 
     fields.yourField.handleChange(files); 
    } 
    } 
/> 

3）通常の方法であなたの応答のための

Answer 2

あなたのonChangeハンドラの内側からsetStateを呼び出しているような気がします。別の関数にそのを抽出し、それを結合するか、またはクラスのプロパティを使用し、すなわち

onChange =() => { 
    ... 
};