0
ファイルエクスプローラを開くボタンがあります。私はこのようにしていますonChangeメソッドが入力から呼び出されない
{
this.props.fileUploadIsOpen
&& <div className='assign-dialog'>
<div className='assign-dialog-inner'>
<div className='dia-title'> File Upload</div>
<div className='dia-body'>
<div className='control-container'>
<div className='control-label'> Video File</div>
<div className='control'>
<input type="text" className="form-control" id="usr"/>
<button type="button" className="btn btn-primary" onClick={(e) => this.upload.click()}>Browse</button>
<input id="myInput" type="file" ref={(ref) => this.upload = ref} style={{visibility: 'hidden', width:0}} onChange={this.handleFileSelect}/>
</div>
</div>
しかし、onChangeメソッドが呼び出されていません。ファイルを選択すると何も起こりません。 onChangeメソッドはhandleFileSelect関数を呼び出すと想定されています。この関数はコンソールにファイル名を表示します。しかし、コンソールでは何も起こりません。 onChangeはトリガーされませんか？どうすれば解決できますか？あなたは
class Uploader extends React.Component {
constructor() {
super();
}
onClick (e) {
const {fileUpload} = this.refs;
fileUpload.click();
}
// prints the file name
handleFileSelect (e) {
const {fileUpload} = this.refs;
console.log(fileUpload.files[0].name)
}
render() {
return (
<div>
<div className='control-label'> Video File</div>
<div className='control'>
<input type="text" className="form-control" id="usr"/>
<button
type="button"
className="btn btn-primary"
onClick={this.onClick.bind(this)}>Browse</button>
<input id="myInput" type="file" ref="fileUpload" style={{visibility: 'hidden', width:0}} onChange={this.handleFileSelect.bind(this)}/>
</div>
</div>
);
}
}
あなたのhtmlにあまりにも多くの異なるコードを乱雑にしているので、たぶん、あなたはまず、あなたのhtml、とあなたのJSコードを分離する必要があります。 jqueryを使用している場合は、この[Example]（https://jsfiddle.net/vucaLn98/）のものと同様のことができます。副次的なこととして、htmlをオンザフライで生成している場合、イベントが正しくバインドされていない可能性があります。静的コードで関数をテストし、それらが機能するかどうかを確認してください。 –
書くときに文字cを小さくする必要がありますonchange = {} – komal
@komal 'onChange'はHTML属性です。 HTMLは大文字小文字を区別しません。 JavaScriptで 'onchange'要素のプロパティを使用している場合にのみ、すべて小文字にする必要があります。 –